The Recipe Finder App is a simple, yet powerful tool designed to help users discover recipes based on dish names they enter. Leveraging the robust API provided by TheMealDB, our app fetches detailed recipes, including ingredients and cooking instructions, for a wide variety of dishes. Built with HTML, CSS, and JavaScript, it offers a user-friendly interface and a responsive design, ensuring a seamless experience across different devices.

API used : https://www.themealdb.com/api.php

• Search Functionality: Users can search for recipes by entering the name of a dish. The app then queries TheMealDB API to retrieve relevant recipes.
• Detailed Recipes: For each search query, the app displays the recipe's name, origin, an image, ingredients required, and step-by-step cooking instructions.
• Responsive Design: Crafted with mobile-first design principles in mind, the app ensures optimal usability on both desktops and mobile devices.
• User-Friendly Interface: The clean and minimalistic UI, powered by the "Poppins" Google Font and custom CSS, enhances readability and user interaction.

1. Entering a Dish Name: The user inputs the name of a dish into the search field.
2. Fetching the Recipe: Upon clicking the search button, the app calls TheMealDB API with the dish name.
3. Displaying the Results: The app parses the JSON response from the API and displays the recipe image, name, origin, and ingredients on the page.
4. Viewing Full Recipe: Users can click on "View Recipe" to see detailed cooking instructions.

• HTML: Structures the app's content and layout.
• CSS: Styles the app, including layout adjustments for mobile responsiveness.
• JavaScript: Powers the app's interactivity, handling API requests and dynamically updating the UI based on user inputs and API responses.

To run the Recipe Finder App locally, follow these steps:

1. Clone the repository or download the source code.
2. Open the project folder and locate the index.html file.
3. Open index.html in a web browser to launch the app.

No additional setup or dependencies are required, as the app relies solely on client-side technologies.

Simply type the name of a dish into the input field and click the "Search" button. The app will display a list of ingredients and cooking instructions for the requested dish. Use the "View Recipe" button to explore the full recipe.

Contributions to the Recipe Finder App are welcome! Please submit pull requests with bug fixes, new features, or improvements to the codebase.

https://youtu.be/kz-LO-g1Zyk?si=VgfjKgnO1-lt6x3w