diff --git a/index.html b/index.html new file mode 100644 index 0000000..bc4842c --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + Interactive Restaurant Menu + + + +
+ Urban Eatery +

Urban Eatery

+

Modern flavors created in Wilmington, DE

+
+ +
+ + + + + + + + + +
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4154c48 --- /dev/null +++ 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 => `${badge}`).join(""); + } + + menuItem.innerHTML = ` + ${item.name} +

${item.name}

+
${badgesHTML}
+

${item.description}

+

${item.price}

+ `; + + 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); + }); +}); + diff --git a/style.css b/style.css new file mode 100644 index 0000000..0087959 --- /dev/null +++ b/style.css @@ -0,0 +1,122 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Roboto', sans-serif; + background-color: #2c2c2c; + color: #ffffff; + line-height: 1.6; + padding: 20px; +} + +.hero { + text-align: center; + margin-bottom: 30px; +} + +.hero-image { + width: 100%; + max-width: 800px; + height: auto; + border-radius: 10px; + margin-bottom: 20px; +} + +.hero h1 { + font-size: 2.5rem; + margin-bottom: 10px; + color: #ffffff; +} + +.hero p { + font-size: 1.1rem; + color: #cccccc; +} + +.menu-controls { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin-bottom: 30px; +} + +.menu-btn { + padding: 12px 18px; + border: none; + background-color: #000000; + color: white; + border-radius: 8px; + cursor: pointer; + font-size: 1rem; +} + +.menu-btn:hover { + background-color: #333333; +} + +.menu-btn.active { + background-color: #007bff; +} + +.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: #ffffff; + border-radius: 10px; + padding: 18px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + text-align: center; + color: #000000; +} + +.menu-item-image { + width: 100%; + height: 150px; + object-fit: cover; + border-radius: 8px; + margin-bottom: 10px; +} + +.menu-item h3 { + margin-bottom: 8px; + color: #000000; +} + +.badge { + display: inline-block; + background-color: #007bff; + color: white; + padding: 2px 6px; + border-radius: 4px; + font-size: 0.8rem; + margin-right: 5px; + margin-bottom: 5px; +} + +.menu-item p { + margin-bottom: 10px; + color: #555555; +} + +.price { + font-weight: bold; + color: #007bff; +} \ No newline at end of file