5codeman / Food-Recipes_APP

FOOD-RECIPES-APP (Made using HTML5, CSS3, API, Local Storage and JavaScript)

Food-Recipes_APP

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

About this Project

1. In this project i have created Food Recipes APP using HTML, CSS, JavaScript, API and Local Storage.
2. 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.
3. I have also use LOCAL STORAGE to store the favourites recipes.
4. This Website is fully responsive.

Features

1. Home Page

   • 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.

2. Meal Details

   • 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.

3. Favourites Page

   • 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)