Recipe Generator

Overview

Recipe Generator is a simple, interactive web application that allows users to discover a random recipe based on a specific ingredient they input. Utilizing jQuery and AJAX, the app fetches data from TheMealDB API to present users with delicious meal options, complete with images, ingredients, and cooking instructions.

Whether you're looking to spice up your dinner routine or make use of ingredients you already have at home, this generator is your go-to solution for culinary inspiration! 🍽️

Features

• Ingredient-Based Search: Input any ingredient to find a recipe that include it.
• Recipe Selection: Discover a random meal from the search results to keep your meal planning exciting.
• Detailed Recipe Information: View comprehensive details including ingredients, measurements, and step-by-step cooking instructions.
• Responsive Design: Enjoy a seamless experience on both desktop and mobile devices.
• Error Handling: Receive user-friendly messages if no recipe is found or if there's an issue fetching data.

Technology Stack

• HTML5 & CSS3: For structuring and styling the web page.
• JavaScript & jQuery: To handle user interactions, simplifying DOM manipulation and make AJAX requests.
• AJAX: For asynchronous data fetching from TheMealDB API.
• TheMealDB API: https://www.themealdb.com/ for providing a free and easy-to-use meal recipe API.
• CDNJS for hosting reliable CDN links.
• Visual Studio Code IDE: Recommended code editor for development.

Setup

To get this project up and running on your local machine, follow these steps:

• Open recipe.html in your browser. You can simply double-click the recipe.html file.

• Alternatively, use a live server extension in your code editor (e.g., Live Server in VS Code) for a better development experience.

• Ensure you have an active internet connection as the project relies on external CDN links and TheMealDB API.

Execution

• Enter an Ingredient: In the input field labeled Enter an ingredient (e.g., ginger), type the ingredient you want to base your recipe search on.

• Search for a Recipe: Click the Search button to fetch a recipe containing the specified ingredient.

• View Recipe Details: Upon a successful search, a new recipe will be displayed with its name, image, list of ingredients, and cooking instructions.

• No Results: An friendly error message will be displayed if no ingredient is listed or, no recipe is found for the given ingredient.

Happy Cooking! 🍽️

Date: December 26, 2024

Author: Prachi Shah @ https://pcisha.my.canva.site/

P.S. The default copyright laws apply.