📌 Project Overview

Recipe Finder is a web application that allows users to discover and explore recipes using a public API. Users can search for meals, filter them by category, sort results, and view detailed cooking instructions.

This project demonstrates the use of JavaScript, API integration, array higher-order functions, and responsive UI design to build an interactive web application.

---

🎯 Objectives

• Integrate a public API to fetch real-time recipe data
• Implement search, filtering, and sorting functionality
• Use JavaScript Higher-Order Functions such as map(), filter(), and sort()
• Build a responsive and user-friendly interface
• Provide users with an easy way to discover recipes

---

🌐 API Used

This project uses the TheMealDB API.

🔗 https://www.themealdb.com/

API Features Used:

• Search meals by name
• Browse meals by category
• Retrieve meal details and instructions
• Fetch meal images and ingredients

---

✨ Features

🔍 Search Recipes

Search for recipes by entering a meal name.

🗂 Filter Recipes

Filter recipes based on categories:

• Vegetarian
• Dessert
• Seafood
• Chicken
• and more

🔽 Sort Results

Sort recipes alphabetically for easier browsing.

❤️ Favorite Recipes

Save favorite recipes using Local Storage.

📖 Recipe Details

Each recipe displays:

• Ingredients
• Cooking instructions
• Recipe image

📱 Responsive Design

Optimized for:

• Desktop
• Tablet
• Mobile

---

⭐ Optional Enhancements

• 🌙 Dark Mode / Light Mode
• ⏳ Loading Indicators
• 📦 Pagination
• 💾 Persistent favorites
• ⚡ Debounced search

---

🛠 Tech Stack

Frontend

• HTML5
• CSS3
• JavaScript (ES6)

APIs

• Fetch API
• TheMealDB API

Tools

• Git
• GitHub

---

📂 Project Structure

recipe-finder/ │ ├── index.html ├── styles/ │ └── style.css │ ├── scripts/ │ └── app.js │ └── README.md