FoodRecipeApp is a recipe search application built using JavaScript, HTML, and CSS. It allows users to search for various food recipes based on different categories. The project follows a mobile-first approach and utilizes the BEM methodology for CSS styling.
The application consists of a homepage and a "My Recipes" page. On the homepage, users can select a food category from a dropdown menu. Based on the selected category, the app presents a list of dishes belonging to that category. Clicking on the "View Recipe" button opens a modal window displaying the recipe instructions, a list of ingredients with their quantities, and a link to a YouTube video demonstrating how to prepare the recipe. Users also have the option to add a recipe to their favorites by clicking the "Add to Favorites" button. Conversely, they can remove a recipe from their favorites using the "Remove from Favorites" option.
The main goal of this project is to apply knowledge of Promises and the Fetch API in JavaScript to create a responsive and interactive recipe search application.
- JavaScript
- HTML
- CSS (Mobile-first approach, BEM methodology)
- Recipe search based on food categories
- Recipe details including instructions, ingredients with quantities, and a video link
- Add recipes to favorites
- Remove recipes from favorites
- Use the dropdown menu on the homepage to select a food category.
- Browse through the displayed recipes and click on "View Recipe" to see the details.
- In the recipe modal, you can view instructions, ingredients, and watch a video related to the recipe.
- To add a recipe to your favorites, click the "Add to Favorites" button.
- To remove a recipe from your favorites, use the "Remove from Favorites" option.
An online demo of the FoodRecipeApp can be accessed at Demo Link.