diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..56a26a0 --- /dev/null +++ b/src/index.html @@ -0,0 +1,33 @@ + + + + + + Interactive Restaurant Menu + + + +
+

Sunrise Bistro

+

Fresh food for every part of your day

+
+ +
+ + + + + + +
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..b8e00af --- /dev/null +++ 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 = ` + ${item.name} +

${item.name}

+

${item.description}

+

${item.price}

+ `; + + 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); + }); +}); \ No newline at end of file diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..79892b1 --- /dev/null +++ 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; +} \ No newline at end of file