Find a meal project is made to provide the user the ability to find a meal they love to eat and provide them with the full ingredients and instructions so that any individual could be able to cook, even when they have never done cooking in their life. This project also provides nutritional details of the meal that the user will be searching for so the user know how much of nutritional values the chosen meal contains.
AS A user
- I WANT to find a meal with the instructions on how to cook that meal and what ingredients is need to prepare the meal with its nutritional values
- SO THAT I can cook a meal according to my nutritional requirements
GIVEN I am searching for a meal
WHEN I enter the meal name and click the search button
THEN I am presented with a multiple results of meal related with my search values
WHEN I click on one of the result meal
THEN I am presented with a popup modal
WHEN I check the modal
THEN I am presented with a Image of the meal and the ingredient and instructions to cook that meal. And also the nutritional values for that particular meal
WHEN I click on the close button of popup modal
THEN I should see the previous page with my old meal search results
3. Popup Modal with a close button on right side. Modals shows the meal tile, image, ingredients, instructions and nutritional values
Access Point: `https://www.themealdb.com/api/json/v1/1/search.php?s=${term}
The ${term} parameter is determined by the search value that was entered in the search bar. If it is a valid search request, the API will respond with all recipes that contain that term. These fetch results are used to populate the search results page. We than create an on-click event listener that will obtain the selected recipe cards recipeID.
The recipesID value is used in the used in the below API to fetch the full recipe details.
Access Point: https://www.themealdb.com/api/json/v1/1/lookup.php?i=${recipeID}`
Giving us the ingredients and instructions. We will than use these details to append to the recipe info card pop up
Returns the nutritional information based on a POST request of the body section containing the recipe content.
Access Point: ‘https://api.edamam.com/api/nutrition-details?app_id=’
The POST request submits the body parameters we specified that contains the recipe details. We set our POST body parameters to be the recipe title and ingredient list.
{“title” ("title"), “ingr”: (Array["ingredient List"])}
The Ingredients List is sent as a JSON string object, containing the ingredients and measure values obtained from the mealdb API as objects.
The response is returned from the API containing the nutritional analysis for the recipe based on the information provided.
- download the zip file, or use GitHub's guidelines to clone the repository from the GitHub repository provided in links section below
Below is the link related to the project:
-
Deployed application - https://rochak-ms.github.io/find-a-meal/
-
GitHub repository - https://github.com/rochak-ms/find-a-meal
MIT License
- Rochak: https://github.com/rochak-ms
- Gina: https://github.com/GEEZEE91
- Jerrome: https://github.com/JerromeL
© 2022 Find A Meal -- Group-5(Rochak, Gina, Jerrome) Project-1