code-differently · wainswo302 · Apr 3, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!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="style.css" />
+</head>
+<body>
+  <header class="hero">
+    <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&h=400&fit=crop" alt="Urban Eatery" class="hero-image">
+    <h1>Urban Eatery</h1>
+    <p>Modern flavors created in Wilmington, DE</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>
+    <button class="menu-btn" data-category="desserts">Desserts</button>
+    <button class="menu-btn" data-category="kidsMenu">Kids Menu</button>
+    <button class="menu-btn" data-category="seasonalSpecials">Seasonal Specials</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/script.js b/script.js
@@ -0,0 +1,300 @@
+const buttons = document.querySelectorAll(".menu-btn");
+const menuTitle = document.querySelector("#menu-title");
+const menuDisplay = document.querySelector("#menu-display");
+
+
+console.log(buttons);
+console.log(menuTitle);
+console.log(menuDisplay);
+
+const menuData = {
+  breakfast: [
+    {
+      name: "Wilmington Omelette",
+      description: "Three-egg omelette with local cheeses and herbs",
+      price: "$12",
+      image: "https://images.unsplash.com/photo-1510693206972-df098062cb71?w=300&h=200&fit=crop",
+      badges: ["Local Favorite", "Vegetarian"]
+    },
+    {
+      name: "Boardwalk Bagel",
+      description: "Toasted bagel with cream cheese and lox",
+      price: "$10",
+      image: "https://images.unsplash.com/photo-1627308595229-7830a5c91f9f?w=300&h=200&fit=crop",
+      badges: ["Popular"]
+    },
+    {
+      name: "Coffee & Pastry",
+      description: "Fresh brewed coffee with seasonal pastry",
+      price: "$8",
+      image: "https://images.unsplash.com/photo-1497935586351-b67a49e012bf?w=300&h=200&fit=crop",
+      badges: []
+    },
+    {
+      name: "Shrimp and Grits",
+      description: "Southern-style shrimp with creamy grits and sausage",
+      price: "$15",
+      image: "https://images.unsplash.com/photo-1559847844-5315695dadae?w=300&h=200&fit=crop",
+      badges: ["Chef's Choice", "Spicy"]
+    }
+  ],
+  lunch: [
+    {
+      name: "Philly Cheesesteak",
+      description: "Thinly sliced ribeye with cheese and onions",
+      price: "$14",
+      image: "https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=300&h=200&fit=crop",
+      badges: ["Iconic", "Spicy"]
+    },
+    {
+      name: "Crab Cake Sandwich",
+      description: "Maryland-style crab cake on brioche",
+      price: "$16",
+      image: "https://images.unsplash.com/photo-1546833999-b9f581a1996d?w=300&h=200&fit=crop",
+      badges: ["Chef's Choice"]
+    },
+    {
+      name: "Hoagie Supreme",
+      description: "Italian hoagie with meats and veggies",
+      price: "$13",
+      image: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d?w=300&h=200&fit=crop",
+      badges: ["Popular"]
+    }
+  ],
+  brunch: [
+    {
+      name: "Brandywine Benedict",
+      description: "Poached eggs on English muffin with hollandaise",
+      price: "$15",
+      image: "https://images.unsplash.com/photo-1558030006-450675393462?w=300&h=200&fit=crop",
+      badges: ["Chef's Choice"]
+    },
+    {
+      name: "Urban Avocado Toast",
+      description: "Smashed avocado on artisanal bread",
+      price: "$12",
+      image: "https://images.unsplash.com/photo-1541519227354-08fa5d50c44d?w=300&h=200&fit=crop",
+      badges: ["Vegetarian"]
+    },
+    {
+      name: "Mimosa Flight",
+      description: "Selection of fresh fruit mimosas",
+      price: "$18",
+      image: "https://images.unsplash.com/photo-1551538827-9c037cb4f32a?w=300&h=200&fit=crop",
+      badges: ["Weekend Special"]
+    },
+    {
+      name: "Red Velvet Pancakes",
+      description: "Fluffy pancakes with cream cheese frosting",
+      price: "$14",
+      image: "https://images.unsplash.com/photo-1528207776546-365bb710ee93?w=300&h=200&fit=crop",
+      badges: ["Popular", "Sweet"]
+    }
+  ],
+  dinner: [
+    {
+      name: "Delaware Duck",
+      description: "Pan-seared duck breast with cherry reduction",
+      price: "$24",
+      image: "https://images.unsplash.com/photo-1544025162-d76694265947?w=300&h=200&fit=crop",
+      badges: ["Premium"]
+    },
+    {
+      name: "Urban Salmon",
+      description: "Grilled salmon with local vegetables",
+      price: "$22",
+      image: "https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=300&h=200&fit=crop",
+      badges: []
+    },
+    {
+      name: "Steak Frites",
+      description: "Grass-fed steak with crispy fries",
+      price: "$26",
+      image: "https://images.unsplash.com/photo-1546833999-b9f581a1996d?w=300&h=200&fit=crop",
+      badges: ["Popular"]
+    }
+  ],
+  happyHour: [
+    {
+      name: "Soft Pretzels",
+      description: "Warm pretzels with beer cheese",
+      price: "$9",
+      image: "https://images.unsplash.com/photo-1639024471283-03518883512d?w=300&h=200&fit=crop",
+      badges: ["Local"]
+    },
+    {
+      name: "Boardwalk Wings",
+      description: "Spicy wings with ranch",
+      price: "$11",
+      image: "https://images.unsplash.com/photo-1567620832903-9fc6debc209f?w=300&h=200&fit=crop",
+      badges: ["Spicy", "Popular"]
+    },
+    {
+      name: "Urban Sliders",
+      description: "Mini burgers with special sauce",
+      price: "$10",
+      image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=300&h=200&fit=crop",
+      badges: []
+    }
+  ],
+  drinks: [
+    {
+      name: "Local Craft Beer",
+      description: "Rotating selection from DE breweries",
+      price: "$6",
+      image: "https://images.unsplash.com/photo-1608270586620-248524c67de9?w=300&h=200&fit=crop",
+      badges: ["Local"]
+    },
+    {
+      name: "Wilmington Wine",
+      description: "Regional white wine selection",
+      price: "$8",
+      image: "https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?w=300&h=200&fit=crop",
+      badges: []
+    },
+    {
+      name: "Artisan Coffee",
+      description: "Single-origin pour-over coffee",
+      price: "$4",
+      image: "https://images.unsplash.com/photo-1497935586351-b67a49e012bf?w=300&h=200&fit=crop",
+      badges: ["Popular"]
+    }
+  ],
+  desserts: [
+    {
+      name: "DuPont Chocolate Cake",
+      description: "Rich chocolate cake inspired by local heritage",
+      price: "$8",
+      image: "https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=300&h=200&fit=crop",
+      badges: ["Chef's Choice"]
+    },
+    {
+      name: "Boardwalk Ice Cream",
+      description: "House-made ice cream with toppings",
+      price: "$7",
+      image: "https://images.unsplash.com/photo-1567206563064-6f60f40a2b57?w=300&h=200&fit=crop",
+      badges: ["Popular"]
+    },
+    {
+      name: "Urban Cheesecake",
+      description: "New York-style cheesecake with berry compote",
+      price: "$9",
+      image: "https://images.unsplash.com/photo-1533134242443-d4fd215305ad?w=300&h=200&fit=crop",
+      badges: []
+    }
+  ],
+  kidsMenu: [
+    {
+      name: "Mini Cheesesteak",
+      description: "Kid-sized cheesesteak with fries",
+      price: "$10",
+      image: "https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=300&h=200&fit=crop",
+      badges: []
+    },
+    {
+      name: "Crab Cake Bites",
+      description: "Mini crab cakes for kids",
+      price: "$12",
+      image: "https://images.unsplash.com/photo-1546833999-b9f581a1996d?w=300&h=200&fit=crop",
+      badges: []
+    },
+    {
+      name: "Grilled Cheese",
+      description: "Classic grilled cheese with tomato soup",
+      price: "$8",
+      image: "https://images.unsplash.com/photo-1481070414801-51b21d9e8301?w=300&h=200&fit=crop",
+      badges: ["Vegetarian"]
+    }
+  ],
+  seasonalSpecials: [
+    {
+      name: "Fall Harvest Salad",
+      description: "Local greens with seasonal produce",
+      price: "$14",
+      image: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=300&h=200&fit=crop",
+      badges: ["Vegetarian", "Seasonal"]
+    },
+    {
+      name: "Winter Stew",
+      description: "Hearty beef stew with root vegetables",
+      price: "$16",
+      image: "https://images.unsplash.com/photo-1476718406336-bb5a9690ee2a?w=300&h=200&fit=crop",
+      badges: ["Comfort Food"]
+    },
+    {
+      name: "Spring Risotto",
+      description: "Creamy risotto with asparagus and peas",
+      price: "$18",
+      image: "https://images.unsplash.com/photo-1621996346565-e3dbc353d2e5?w=300&h=200&fit=crop",
+      badges: ["Vegetarian"]
+    }
+  ]
+};
+
+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",
+    desserts: "Desserts",
+    kidsMenu: "Kids Menu",
+    seasonalSpecials: "Seasonal Specials"
+  };
+
+  menuTitle.textContent = categoryTitles[category];
+
+  if (category === 'brunch') {
+    const message = document.createElement("p");
+    message.textContent = "Available Saturdays and Sundays in downtown Wilmington";
+    message.style.fontStyle = "italic";
+    message.style.color = "#cccccc";
+    message.style.textAlign = "center";
+    message.style.marginBottom = "20px";
+    menuDisplay.appendChild(message);
+  }
+
+  menuData[category].forEach(item => {
+    const menuItem = document.createElement("div");
+    menuItem.classList.add("menu-item");
+
+    let badgesHTML = "";
+    if (item.badges && item.badges.length > 0) {
+      badgesHTML = item.badges.map(badge => `<span class="badge">${badge}</span>`).join("");
+    }
+
+    menuItem.innerHTML = `
+      <img src="${item.image}" alt="${item.name}" class="menu-item-image">
+      <h3>${item.name}</h3>
+      <div class="badges">${badgesHTML}</div>
+      <p>${item.description}</p>
+      <p class="price">${item.price}</p>
+    `;
+
+    menuDisplay.appendChild(menuItem);
+  });
+}
+
+displayMenu("breakfast");
+
+buttons.forEach(button => {
+  button.addEventListener("click", function () {
+    const selectedCategory = button.dataset.category;
+    displayMenu(selectedCategory);
+  });
+});
+
+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);
+  });
+});
+