From 0a9a3ff1fb6bc3d0cb576e43da379c7bec98e9c2 Mon Sep 17 00:00:00 2001 From: Derwin Bell Date: Wed, 1 Apr 2026 19:14:30 -0400 Subject: [PATCH 1/2] Finished .01 --- src/index.html | 33 +++++++++++ src/script.js | 149 +++++++++++++++++++++++++++++++++++++++++++++++++ src/styles.css | 91 ++++++++++++++++++++++++++++++ 3 files changed, 273 insertions(+) create mode 100644 src/index.html create mode 100644 src/script.js create mode 100644 src/styles.css 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..e99cb76 --- /dev/null +++ b/src/script.js @@ -0,0 +1,149 @@ +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" + }, + { + name: "Egg & Cheese Sandwich", + description: "Scrambled eggs and cheese on a toasted roll", + price: "$7" + }, + { + name: "Fruit Bowl", + description: "Fresh seasonal fruit served chilled", + price: "$6" + } + ], + lunch: [ + { + name: "Classic Burger", + description: "Beef burger with fries", + price: "$12" + }, + { + name: "Chicken Caesar Wrap", + description: "Grilled chicken, romaine, and Caesar dressing", + price: "$11" + }, + { + name: "Tomato Soup", + description: "Warm tomato soup with herbs", + price: "$7" + } + ], + brunch: [ + { + name: "Chicken & Waffles", + description: "Crispy chicken with Belgian waffles", + price: "$14" + }, + { + name: "Avocado Toast", + description: "Toasted bread topped with avocado and eggs", + price: "$10" + }, + { + name: "Brunch Mimosa", + description: "Sparkling brunch favorite", + price: "$9" + } + ], + dinner: [ + { + name: "Grilled Salmon", + description: "Salmon served with rice and vegetables", + price: "$18" + }, + { + name: "Steak Pasta", + description: "Sliced steak over creamy pasta", + price: "$19" + }, + { + name: "Veggie Bowl", + description: "Roasted vegetables over quinoa", + price: "$15" + } + ], + happyHour: [ + { + name: "Mini Sliders", + description: "Three mini burgers", + price: "$6" + }, + { + name: "Loaded Fries", + description: "Fries topped with cheese and bacon", + price: "$7" + }, + { + name: "Mozzarella Sticks", + description: "Crispy sticks with marinara sauce", + price: "$6" + } + ], + drinks: [ + { + name: "Fresh Lemonade", + description: "Cold lemonade made fresh daily", + price: "$4" + }, + { + name: "Iced Coffee", + description: "Cold brew coffee over ice", + price: "$5" + }, + { + name: "Berry Smoothie", + description: "Mixed berries blended with yogurt", + price: "$6" + } + ] +}; + +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]; + + menuData[category].forEach(item => { + const menuItem = document.createElement("div"); + menuItem.classList.add("menu-item"); + + menuItem.innerHTML = ` +

${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..20ee9c5 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,91 @@ +* { + 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; +} \ No newline at end of file From 48f7d6d1faf45f510d29daecd3c37c152e3e975f Mon Sep 17 00:00:00 2001 From: Derwin Bell Date: Thu, 2 Apr 2026 07:16:25 -0400 Subject: [PATCH 2/2] Finished .02 --- src/script.js | 63 +++++++++++++++++++++++++++++++++++--------------- src/styles.css | 18 +++++++++++++++ 2 files changed, 63 insertions(+), 18 deletions(-) diff --git a/src/script.js b/src/script.js index e99cb76..b8e00af 100644 --- a/src/script.js +++ b/src/script.js @@ -7,102 +7,120 @@ const menuData = { { name: "Pancake Stack", description: "Fluffy pancakes served with maple syrup", - price: "$8" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + 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" + price: "$6", + image: "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?auto=format&fit=crop&w=800&q=80" } ] }; @@ -121,11 +139,20 @@ function displayMenu(category) { 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}

diff --git a/src/styles.css b/src/styles.css index 20ee9c5..79892b1 100644 --- a/src/styles.css +++ b/src/styles.css @@ -88,4 +88,22 @@ body { .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