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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent