The Meals App is a web application that allows food enthusiasts to search for their favorite meals and discover new recipes. Users can search for meals based on keywords, view meal details, and add meals to their favorites list.
-
Search for Meals: Users can search for meals by entering keywords in the search bar. The app fetches meal data from the MealDB API to provide accurate search results.
-
View Meal Details: Clicking on a meal card displays detailed information about the selected meal, including its name, category, area, instructions, and Ingredients.
-
Add to Favorites: Users can add meals to their favorites list by clicking on the heart icon. The selected meals are stored in the browser's local storage for future reference.
-
Favorites List: The app maintains a favorites list that allows users to view their saved meals. The favorites list is accessible through a sidebar and can be toggled on and off.
The Meals App is built using the following technologies:
- HTML: Markup language used for structuring the web page.
- CSS: Styling language used for the visual appearance of the app.
- JavaScript: Programming language used for the app's interactivity and functionality.
- Bootstrap: CSS framework used for responsive and mobile-friendly design.
- Fetch API: JavaScript API used for making HTTP requests to fetch meal data from the MealDB API.
- Local Storage: Browser API used for storing and retrieving data locally.
To run the Meals App locally, follow these steps:
- Clone the repository:
git clone <repository-url> - Navigate to the project directory:
cd meals-app - Open the
index.htmlfile in a web browser.
Upon opening the Meals App in a web browser, you will be presented with a homepage featuring a navigation bar, search bar, and a collection of meal cards.
- Enter keywords in the search bar to search for meals. The app will display meal cards matching your search query.
- Click on a meal card to view its details, including the name, category, area, instructions, and Ingredients.
- Click on the Video Button and it will move you to youtube link of the recipe.
- To add a meal to your favorites list, click on the heart icon on the meal card. The meal will be saved in the browser's local storage.
- To access your favorites list, click on the "Favorites ♥" button in the navigation bar. The sidebar will appear, showing your saved meals.
- You can remove a meal from your favorites list by clicking the "Remove" button next to the meal in the sidebar.
Contributions to the Meals App are welcome! If you have any suggestions, improvements, or bug fixes, please open an issue or submit a pull request.
