code-differently · djbell261 · Apr 1, 2026 · Apr 2, 2026
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Interactive Restaurant Menu</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <header class="hero">
+    <h1>Sunrise Bistro</h1>
+    <p>Fresh food for every part of your day</p>
+  </header>
+
+  <section class="menu-controls">
+    <button class="menu-btn" data-category="breakfast">Breakfast</button>
+    <button class="menu-btn" data-category="lunch">Lunch</button>
+    <button class="menu-btn" data-category="brunch">Brunch</button>
+    <button class="menu-btn" data-category="dinner">Dinner</button>
+    <button class="menu-btn" data-category="happyHour">Happy Hour</button>
+    <button class="menu-btn" data-category="drinks">Drinks</button>
+  </section>
+
+  <main class="menu-section">
+    <h2 id="menu-title">Menu</h2>
+    <div id="menu-display">
+      <p>Select a category to view menu items.</p>
+    </div>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/src/script.js b/src/script.js
@@ -0,0 +1,176 @@
+const buttons = document.querySelectorAll(".menu-btn");
+const menuTitle = document.querySelector("#menu-title");
+const menuDisplay = document.querySelector("#menu-display");
+
+const menuData = {
+  breakfast: [
+    {
+      name: "Pancake Stack",
+      description: "Fluffy pancakes served with maple syrup",
+      price: "$8",
+      image: "https://images.unsplash.com/photo-1528207776546-365bb710ee93?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Egg & Cheese Sandwich",
+      description: "Scrambled eggs and cheese on a toasted roll",
+      price: "$7",
+      image: "https://images.unsplash.com/photo-1482049016688-2d3e1b311543?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Fruit Bowl",
+      description: "Fresh seasonal fruit served chilled",
+      price: "$6",
+      image: "https://images.unsplash.com/photo-1490474418585-ba9bad8fd0ea?auto=format&fit=crop&w=800&q=80"
+    }
+  ],
+  lunch: [
+    {
+      name: "Classic Burger",
+      description: "Beef burger with fries",
+      price: "$12",
+      image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Chicken Caesar Wrap",
+      description: "Grilled chicken, romaine, and Caesar dressing",
+      price: "$11",
+      image: "https://images.unsplash.com/photo-1626700051175-6818013e1d4f?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Tomato Soup",
+      description: "Warm tomato soup with herbs",
+      price: "$7",
+      image: "https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=800&q=80"
+    }
+  ],
+  brunch: [
+    {
+      name: "Chicken & Waffles",
+      description: "Crispy chicken with Belgian waffles",
+      price: "$14",
+      image: "https://images.unsplash.com/photo-1525351484163-7529414344d8?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Avocado Toast",
+      description: "Toasted bread topped with avocado and eggs",
+      price: "$10",
+      image: "https://images.unsplash.com/photo-1603046891744-76e6481d8367?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Brunch Mimosa",
+      description: "Sparkling brunch favorite",
+      price: "$9",
+      image: "https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&w=800&q=80"
+    }
+  ],
+  dinner: [
+    {
+      name: "Grilled Salmon",
+      description: "Salmon served with rice and vegetables",
+      price: "$18",
+      image: "https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Steak Pasta",
+      description: "Sliced steak over creamy pasta",
+      price: "$19",
+      image: "https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Veggie Bowl",
+      description: "Roasted vegetables over quinoa",
+      price: "$15",
+      image: "https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=800&q=80"
+    }
+  ],
+  happyHour: [
+    {
+      name: "Mini Sliders",
+      description: "Three mini burgers",
+      price: "$6",
+      image: "https://images.unsplash.com/photo-1550547660-d9450f859349?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Loaded Fries",
+      description: "Fries topped with cheese and bacon",
+      price: "$7",
+      image: "https://images.unsplash.com/photo-1576107232684-1279f390859f?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Mozzarella Sticks",
+      description: "Crispy sticks with marinara sauce",
+      price: "$6",
+      image: "https://images.unsplash.com/photo-1548340748-6d2b7d7da280?auto=format&fit=crop&w=800&q=80"
+    }
+  ],
+  drinks: [
+    {
+      name: "Fresh Lemonade",
+      description: "Cold lemonade made fresh daily",
+      price: "$4",
+      image: "https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Iced Coffee",
+      description: "Cold brew coffee over ice",
+      price: "$5",
+      image: "https://images.unsplash.com/photo-1517701604599-bb29b565090c?auto=format&fit=crop&w=800&q=80"
+    },
+    {
+      name: "Berry Smoothie",
+      description: "Mixed berries blended with yogurt",
+      price: "$6",
+      image: "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?auto=format&fit=crop&w=800&q=80"
+    }
+  ]
+};
+
+function displayMenu(category) {
+  menuDisplay.innerHTML = "";
+
+  const categoryTitles = {
+    breakfast: "Breakfast Menu",
+    lunch: "Lunch Menu",
+    brunch: "Brunch Menu",
+    dinner: "Dinner Menu",
+    happyHour: "Happy Hour Menu",
+    drinks: "Drinks Menu"
+  };
+
+  menuTitle.textContent = categoryTitles[category];
+
+  // Stretch challenge 4: weekend brunch message
+  if (category === "brunch") {
+    const brunchMessage = document.createElement("p");
+    brunchMessage.classList.add("weekend-message");
+    brunchMessage.textContent = "Available Saturdays and Sundays only";
+    menuDisplay.appendChild(brunchMessage);
+  }
+
+  menuData[category].forEach(item => {
+    const menuItem = document.createElement("div");
+    menuItem.classList.add("menu-item");
+
+    menuItem.innerHTML = `
+      <img src="${item.image}" alt="${item.name}" class="menu-image">
+      <h3>${item.name}</h3>
+      <p>${item.description}</p>
+      <p class="price">${item.price}</p>
+    `;
+
+    menuDisplay.appendChild(menuItem);
+  });
+}
+
+displayMenu("breakfast");
+buttons[0].classList.add("active");
+
+buttons.forEach(button => {
+  button.addEventListener("click", function () {
+    buttons.forEach(btn => btn.classList.remove("active"));
+    button.classList.add("active");
+
+    const selectedCategory = button.dataset.category;
+    displayMenu(selectedCategory);
+  });
+});
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,109 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #fdf8f3;
+  color: #2d2d2d;
+  line-height: 1.6;
+  padding: 20px;
+}
+
+.hero {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+
+.hero p {
+  font-size: 1.1rem;
+  color: #666;
+}
+
+.menu-controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.menu-btn {
+  padding: 12px 18px;
+  border: none;
+  background-color: #2d6a4f;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.menu-btn:hover {
+  background-color: #1b4332;
+}
+
+.menu-btn.active {
+  background-color: #d97706;
+}
+
+.menu-section {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+#menu-title {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#menu-display {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.menu-item {
+  background-color: white;
+  border-radius: 10px;
+  padding: 18px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+}
+
+.menu-item h3 {
+  margin-bottom: 8px;
+}
+
+.menu-item p {
+  margin-bottom: 10px;
+  color: #555;
+}
+
+.price {
+  font-weight: bold;
+  color: #d97706;
+}
+
+.menu-image {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+
+.weekend-message {
+  grid-column: 1 / -1;
+  text-align: center;
+  background-color: #fff3cd;
+  color: #8a5a00;
+  padding: 12px;
+  border-radius: 8px;
+  font-weight: bold;
+}