Project Title: Meal-Planner

Deployment:

LIVE REPOSITORY

Meal Planner

Table of Contents

1. Project Description
2. Technologies Used
3. User Story
4. Web Application
5. Challenges
6. Future
7. Resources
8. Contributors

Project Description:

Search for recipe ideas by meal name and save your recipe links to a built-in weekly calender. Meal Planner also has a random cocktail button that will present you a cocktail recipe to go with your meal.

Technologies Used:

MealDB API, CocktailDB API, HTML, CSS, Materialize, Javascript, Jquery, JSON, AJAX, Luxon Library

User Story:

• On the main page the user will find an input bar to search for a meal and receive the recipe's information.

• There's a search button to the right which finds a random cocktail and receives the drink's information.

• To the left of the webpage there's a sidebar for the calendar modal, with a "open" button to view the weekly meal plan.

• On searching for a meal the user will be presented with a small display card that has a link for it's recipe/ingredients. As well as a link to a youtube video and a set of buttons to save this recipe's link to the calendar modal.

• On searching for a random drink the user will be presented with a small display card that has a it's information and link to the ingredients. As well as a set of buttons to save this drink's link to the calender modal.

• Upon opening the calender modal the user will find their selected meal and drink placed in the relevant week day.

• The user can then scroll down to either "save & close" their choices within the calendar modal or "clear" the week days to select different meals and drinks.

• This web application will hopefully help the user plan ahead, provide experience with new recipes and/or drinks, while assisting them with organizing it all for the upcoming week.

Web-Application

Meal-Planner

Main-Page

Application-Features

Search-Results

Recipe-Info-Link

Recipe-Youtube-Link

Drink-Info-Link

Click-Buttons

Calendar-Modal

Local-Storage

Reload-Webpage

Challenges:

• Finding a suitable API to match our desired functionality was our first major challenge.

• It was also difficult to include and display the recipes within a card correctly and then saving them in the calendar modal as a link.

• Then adding a button to clear the calendar and start new for the next week of meal planning and drinks.

Direction for Future Development:

• Can't decide what you want to cook or don't feel like cooking? Hook up Zomato API to search for local restaurants by cuisine.

• Add allergies, and health restrictions to recipe search

• Shopping list with price estimate and availability

• We are currently just displaying links to the recipes as search results, but we could display the title and link as a collapsed card and actually render the ingredients and instructions when the card is expanded

Resources:

Background Photo by Lukas Blazek on Unsplash

Calendar Photo by Eric Rothermel on Unsplash

Contributors:

Greg Harris, Jenny Detmering, Nick Rider, Renae Sowald

License: