🍽️ What's For Dinner

A dynamic and responsive web application that generates random food recipes using HTML, CSS, Bootstrap, and JavaScript. The app allows users to discover new meals with one click using structured JavaScript (Functions, Objects, Arrays).

---

📛 Project Badges

---

📌 Project Overview

What's For Dinner is a lightweight web app that helps users pick a random meal idea with just one click. Recipes are stored as JavaScript objects inside arrays, and meals are selected randomly using core JS logic.

The purpose of the project:

Practice DOM manipulation

Use Functions, Objects, and Arrays

Explore UI layout using Bootstrap

Create a clean and user-friendly experience

---

🔧 How It Works (JavaScript Logic)

Recipes are stored as objects inside an array

A random index is selected using Math.random()

The selected object is shown dynamically on the page

The UI updates with title, ingredients, and image

---

🎨 Features

🍽️ Random recipe generator

⚡ JavaScript-powered logic using Functions & Arrays 📱 Fully responsive UI with Bootstrap 🧩 Simple and clean code structure 🎯 Beginner-friendly and customizable 🎨 Modern layout with good typography

---

🧰 Tech Stack

Technology	Purpose
HTML5	Structure and semantic content of the web app
CSS3	Styling, layout, and visual design
Bootstrap	Grid system, responsive layout, and UI components
JavaScript (ES6)	Core logic for random recipe generation using Functions, Objects, and Arrays
Icons / Images	Improve UI clarity and overall user experience
GitHub Pages	Hosting the live demo of the project
Shields / Badges	Display project technologies and status visually

---

📁 Project Structure

What's-For-Dinner/
│
├── index.html                # Main application page
│
├── /css
│   └── style.css             # Custom styles
│
├── /js
│   └── script.js             # Random recipe generator logic
│
├── /images                   # Dish images (optional)
│
└── README.md                 # Project documentation

🎯 Goals

• Build a responsive recipe application that works smoothly across desktops, tablets, and mobile devices.
• Use UI/UX best practices to deliver a simple, intuitive, and visually appealing cooking experience.
• Utilize Bootstrap to speed up layout creation and ensure consistent, responsive styling.
• Implement JavaScript functions, objects, and arrays to generate random recipes dynamically.
• Organize project files cleanly to improve scalability, readability, and future updates.

---

🛠️ Technologies Used

• HTML5 – Semantic markup for structured content
• CSS3 – Styling and layout design
• Bootstrap – Responsive grid system and UI components
• script.js - Random recipe generator logic
• Project structure:

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/MohamedSaadat/Whats-For-Dinner.git

2. Open the Project

Simply open index.html in any browser:

open index.html

or double-click the file.

📜 License

This project is licensed under the MIT License. You are free to modify, reuse, and build upon it for personal or commercial use.

---

🖥️ Live Demo

👉 View the Dashboard Online:

https://mohamedsaadat.github.io/What-s-For-Dinner/

📧 Contact

If you’d like to collaborate or discuss UI/UX or front-end design:

Author: Mohamed Saadat

Email: mohamed93saadat@gmail.com

GitHub: https://github.com/MohamedSaadat