🍽️ Global Food Explorer

An interactive web application that allows users to explore, search, and discover meals from around the world using real-time API data. Users can browse cuisines and add items to a cart-like interface.

---

🚀 Features

• 🔍 Search Functionality Search meals dynamically using keywords

• 🌍 Cuisine Filters Explore meals by categories like:

  • Indian
  • Japanese
  • Chinese

• 🖼️ Dynamic Meal Display Meals are fetched from an external API and rendered in real-time

• 🛒 Cart System

  • Add meals to cart
  • Remove items dynamically

• 🎥 YouTube Integration Click on meals to view preparation videos

• 🌙 Dark/Light Mode Toggle Switch between themes for better user experience

• ✨ Interactive UI Effects Hover animations, shadows, and transitions

---

🛠️ Tech Stack

• HTML5 – Structure
• CSS3 – Styling & responsiveness
• JavaScript (Vanilla JS) – Logic & DOM manipulation
• MealDB API – Data source 👉 [https://www.themealdb.com/]

---

📂 Project Structure

├── index.html
├── styles.css
├── apitrial.js

---

⚙️ How It Works

1. User enters a search query

2. App fetches data from MealDB API

3. Meals are displayed dynamically

4. User can:

   • Filter by cuisine
   • Add items to cart
   • Watch recipe videos

🧠 Key Learnings

• Working with external APIs
• Asynchronous JavaScript (fetch, promises)
• DOM manipulation and event handling
• Building interactive UI without frameworks

---

🌐 Live Demo

👉 [https://global-food-explorer.vercel.app/]

---

📌 Author

Atul Panda