Restaurant Website - DOM Manipulation Project

A fully functional restaurant website built using HTML, CSS, and vanilla JavaScript with extensive DOM manipulation.

🎯 Project Overview

This project demonstrates advanced DOM manipulation techniques to create an interactive restaurant ordering website. All content is dynamically generated using JavaScript, including menu items, reviews, and cart functionality.

✨ Features

1. Dynamic Content Rendering

• All menu items rendered using DOM manipulation from JSON data structure
• Products organized by categories (Burgers, Fries, Cold Drinks)
• Dynamic creation of HTML elements using createElement(), appendChild(), etc.

2. Shopping Cart Functionality

• ➕ Add items to cart with single click
• 📊 Real-time cart badge counter
• 🛒 Shopping cart modal popup
• ➖➕ Increase/decrease item quantities
• 💰 Automatic price calculation
• 💾 Cart persistence using LocalStorage

3. Customer Reviews Slider

• 📱 Interactive review carousel
• ◀️▶️ Previous/Next navigation buttons
• 🔄 Displays 3 reviews at a time
• ⭐ Star ratings and customer details

4. Similar Restaurants

• 🏪 Grid display of partner restaurants
• 🖼️ Logo images with restaurant names
• Generated dynamically from data structure

5. Category Filtering

• 🔍 Tab-based navigation
• Filter menu items by category
• Active state indication

6. Responsive Design

• 📱 Mobile-friendly layout
• 💻 Tablet and desktop optimization
• 🎨 Matches Figma design specifications

🗂️ Project Structure

src/
├── index.html (clean, no inline code)
├── output.css (existing Tailwind)
├── input.css (existing)
├── css/
│   └── styles.css (NEW - all custom styles)
├── js/
│   └── main.js (NEW - all JavaScript)
└── assets/
    └── images/

📊 Data Structure

The project uses a JSON-based data structure to organize restaurant information:

{
    name: "Restaurant Name",
    rating: 3.4,
    products: [
        {
            id: 1,
            name: "Product Name",
            price: 23.10,
            category: "burgers",
            image: "path/to/image",
            description: "Product description"
        }
    ],
    reviews: [...],
    similarRestaurants: [...]
}

🛠️ DOM Manipulation Techniques Used

Element Creation

• document.createElement() - Create new elements
• element.appendChild() - Add elements to DOM
• element.innerHTML - Set inner HTML content
• element.textContent - Set text content

Element Selection

• document.getElementById() - Select by ID
• document.querySelectorAll() - Select multiple elements
• document.querySelector() - Select single element

Event Handling

• addEventListener() - Attach event listeners
• Click events for buttons and cart items
• Form submission handling
• Modal interactions

Dynamic Styling

• element.classList.add/remove() - Toggle classes
• element.style.property - Direct style manipulation
• CSS class management for active states

🚀 How to Run

1. Clone or download the project

   cd "src/pages"

2. Open in browser

   • Open index.html in any modern web browser
   • Or use Live Server extension in VS Code

3. Interact with the website

   • Browse menu items
   • Add items to cart
   • View shopping cart modal
   • Navigate through reviews
   • Filter by categories

💡 Key Features Implementation

Add to Cart System

function addToCart(product) {
  const existingItem = cart.find((item) => item.id === product.id);
  if (existingItem) {
    existingItem.quantity++;
  } else {
    cart.push({ ...product, quantity: 1 });
  }
  updateCartUI();
}

Dynamic Menu Rendering

function createMenuItemElement(product) {
  const item = document.createElement("div");
  item.className = "menu-item";
  // ... create child elements
  return item;
}

Review Slider

function nextReview() {
  if (currentReviewIndex < reviews.length - 3) {
    currentReviewIndex++;
    renderReviews();
  }
}

🎨 Design Features

• Color Scheme: Orange (#FC8A06) and Navy (#03081F)
• Typography: Poppins font family
• Components: Cards, modals, buttons, badges
• Animations: Smooth transitions and hover effects
• Layout: CSS Grid and Flexbox

📱 Responsive Breakpoints

• Mobile: < 640px
• Tablet: 640px - 968px
• Desktop: > 968px

🔧 Technologies Used

• HTML5
• CSS3 (Flexbox, Grid, Animations)
• Vanilla JavaScript (ES6+)
• DOM Manipulation

📦 LocalStorage Features

• Cart data persists across page refreshes
• Automatic save on cart updates
• Load cart on page initialization

🎯 Learning Outcomes

This project demonstrates:

• ✅ Advanced DOM manipulation
• ✅ Dynamic content generation
• ✅ Event handling and delegation
• ✅ LocalStorage API usage
• ✅ Responsive web design
• ✅ Clean code organization
• ✅ JSON data structures

📝 Notes

• All images are loaded from ../assets/images/ directory
• Cart data is stored in browser's LocalStorage
• The design closely follows the provided Figma specifications
• All interactive features work without any external libraries

🚀 Future Enhancements

• Search functionality for menu items
• User authentication
• Order history
• Payment integration
• Real-time order tracking
• Multiple location support

👨‍💻 Author

Usama Akram

📄 License

This project is for educational purposes.

---

Happy Coding! 🍔🍟