FOOD-RECIPES-APP (Made using HTML5, CSS3, API, Local Storage and JavaScript)
You can see the website live at: https://5codeman.github.io/Food-Recipes_APP/
Project demo video Link: https://www.youtube.com/watch?v=CuG0DDVyaVo
TheMeal API Link: https://www.themealdb.com/api.php
- In this project i have created Food Recipes APP using HTML, CSS, JavaScript, API and Local Storage.
- The main logic use in this project is to fetch the meal recipes data on every keypresss and use the data to show recipes on the screen.
- I have also use LOCAL STORAGE to store the favourites recipes.
- This Website is fully responsive.
-
- Users can Search any Meals from the API using Seach Input.
- Users can add the Meals to Favourites by Clicking on the Favourites icon.
- Users can click on the home icon in nav bar to refresh the Page.
- Users can see all the favourites meal recipes in the favouites list when they click on My Favourites Button which is in nav bar.
-
- Users can see the Recipes by clicking on the View Recipes Button which is on the render meal card.
- The Meal Detials Modal consists of information of the meals Such as Image, Name, Instructions and Watch Recipe video link.
- We can close the Meal Detials Modal when we click on the X icon in Model.
-
- Displays list of all the favourite recipes.
- Each recipes card in favourites list has remove button, clicking on which should remove that meal from the list.
- The Favourite List is persistent (having the same number of meals before and after closing the browser/refreshing the browser)