diff --git a/henrriettariverson/images/restuarant.png b/henrriettariverson/images/restuarant.png new file mode 100644 index 0000000..fdf6145 Binary files /dev/null and b/henrriettariverson/images/restuarant.png differ diff --git a/henrriettariverson/images/sunbistro.png b/henrriettariverson/images/sunbistro.png new file mode 100644 index 0000000..7c72d7e Binary files /dev/null and b/henrriettariverson/images/sunbistro.png differ diff --git a/henrriettariverson/index.html b/henrriettariverson/index.html new file mode 100644 index 0000000..eba208e --- /dev/null +++ b/henrriettariverson/index.html @@ -0,0 +1,43 @@ + + + + + + Interactive Restaurant Menu + + + + + +
+ + Restaurant food + +

Sunset Bistro

+

Serving Flavor from Sunrise to Sunset

+ +
+ +
+ + + + + + + +
+ +
+ + + + +
+ + + + + \ No newline at end of file diff --git a/henrriettariverson/script.js b/henrriettariverson/script.js new file mode 100644 index 0000000..e936462 --- /dev/null +++ b/henrriettariverson/script.js @@ -0,0 +1,206 @@ +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: "Pancake Stack", + description: "Fluffy pancakes served with maple syrup", + price: "$8", + popular: true + }, + { + 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", + popular: true + }, + { + 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", + popular: true + }, + { + 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", + popular: true + }, + { + 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", + popular: true + }, + { + 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", + popular: true + } + ], + + kids: [ + { + name: "Kids Cheeseburger", + description: "Small cheeseburger with fries", + price: "$6" + }, + { + name: "Chicken Tenders", + description: "Crispy chicken tenders with dipping sauce", + price: "$6", + popular: true + }, + { + name: "Grilled Cheese", + description: "Classic grilled cheese sandwich", + price: "$5" + } + ] +}; + +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", + kids: "Kids Menu" + }; + + menuTitle.textContent = categoryTitles[category]; + + + if (category === "brunch") { + + const brunchMessage = document.createElement("p"); + brunchMessage.textContent = "Available Saturdays and Sundays only"; + brunchMessage.style.textAlign = "center"; + brunchMessage.style.marginBottom = "20px"; + brunchMessage.style.fontWeight = "bold"; + + menuDisplay.appendChild(brunchMessage); + + } + + menuData[category].forEach(item => { + + const menuItem = document.createElement("div"); + menuItem.classList.add("menu-item"); + + /* Creating the Popular badge */ + const popularLabel = item.popular ? "⭐ Popular" : ""; + + menuItem.innerHTML = ` +

${item.name} ${popularLabel}

+

${item.description}

+

${item.price}

+ `; + + menuDisplay.appendChild(menuItem); + + }); +} + +displayMenu("breakfast"); + + +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/henrriettariverson/style.css b/henrriettariverson/style.css new file mode 100644 index 0000000..43783d2 --- /dev/null +++ b/henrriettariverson/style.css @@ -0,0 +1,110 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Arial, sans-serif; + background: linear-gradient(to bottom, #ff7e5f, #feb47b, #fd5e9c, #6a4c93); + color: #fff5f0; + line-height: 1.6; + padding: 20px; +} + +/* HERO SECTION */ + +.hero { + text-align: center; + margin-bottom: 30px; +} + +/* HERO IMAGE */ + +.hero-img { + width: 100%; + max-height: 300px; + object-fit: cover; + border-radius: 10px; + margin-bottom: 15px; +} + +.hero h1 { + font-size: 2.5rem; + margin-bottom: 10px; + color: #000000; +} + +.hero p { + font-size: 1.1rem; + color: #000000; +} + +/* MENU BUTTONS */ + +.menu-controls { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin-bottom: 30px; +} + +.menu-btn { + padding: 12px 18px; + border: none; + background-color: #ff6f61; + color: rgb(13, 13, 13); + border-radius: 8px; + cursor: pointer; + font-size: 1rem; +} + +.menu-btn:hover { + background-color: #ff9a5a; +} + +.menu-btn.active { + background-color: #6a4c93; +} + +/* MENU SECTION */ + +.menu-section { + max-width: 900px; + margin: 0 auto; +} + +#menu-title { + text-align: center; + margin-bottom: 20px; + color: #000000; +} + +#menu-display { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; +} + +.menu-item { + background-color: rgba(255, 255, 255, 0.9); + border-radius: 10px; + padding: 18px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); + color: #3a1f2d; +} + +.menu-item h3 { + margin-bottom: 8px; +} + +.menu-item p { + margin-bottom: 10px; + color: #5c3a42; +} + +.price { + font-weight: bold; + color: #ff6f3c; +} \ No newline at end of file