diff --git a/christopherbennett/images/SunriseBistroSS.png b/christopherbennett/images/SunriseBistroSS.png new file mode 100644 index 0000000..5d1afee Binary files /dev/null and b/christopherbennett/images/SunriseBistroSS.png differ diff --git a/christopherbennett/images/mahimahifish.png b/christopherbennett/images/mahimahifish.png new file mode 100644 index 0000000..57d1bb8 Binary files /dev/null and b/christopherbennett/images/mahimahifish.png differ diff --git a/christopherbennett/index.html b/christopherbennett/index.html new file mode 100644 index 0000000..5f10d4b --- /dev/null +++ b/christopherbennett/index.html @@ -0,0 +1,109 @@ + + + + + + Mahi-Market + + + + + + + + +
+ Fresh catches weekly | Open Mon-Sat 8AM-7PM +
+ +
+
+ +
+

Mahi-Market

+

Fresh fish to include for every lunch!

+
+
+ +
+ + +
+ +
+ Follow the Waves, Find the Fish +
+
+ + + +
+
+

Our Seafood Market

+

+ Choose from a wide variety of fresh seafood, handcrafted meals, + and market favorites made for easy, delicious dining. +

+
+
+ +
+ + +
+
+ + +
+ + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/christopherbennett/results/reflectionQuestions.md b/christopherbennett/results/reflectionQuestions.md new file mode 100644 index 0000000..70ecaf1 --- /dev/null +++ b/christopherbennett/results/reflectionQuestions.md @@ -0,0 +1,33 @@ +Answer these after completing the project: + +1. How did JavaScript make your webpage interactive? + +* JavaScript adds behavior functionality to the web-page. Some examples of these behaviors are +adding/removing contents on the page and utilizing reusable data. + +2. What did `querySelectorAll()` help you do? + +* quedrySelectorAll() selects all elements that are in the said query when the funciton is called. +You can find id's with # or classNames with . + + +3. What is the purpose of `addEventListener()`? + +* addEventListener listens for an 'event' to happen before the code inside of it is executed. One example of an event is a mouse click, or mouse hover. + + +4. Why is storing menu data in objects and arrays useful? + +Storing menu data in objects and arrays are useful ways to reuse data in multiple areas of your project, aswell as making these data types a definitive structure that will be easier to debug. + + +5. What was the hardest part of the project? + +The hardest part of the project definitely involved utilizing the CSS and improving the website further based on a design perspective. + + +6. What would you add next if this were a real restaurant website? + +I would add a cart system where you can buy and order the food online. + + diff --git a/christopherbennett/script.js b/christopherbennett/script.js new file mode 100644 index 0000000..61dbb37 --- /dev/null +++ b/christopherbennett/script.js @@ -0,0 +1,163 @@ +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); + +/* +- `querySelectorAll(".menu-btn")` selects all the menu buttons +- `querySelector("#menu-title")` selects the menu heading +- `querySelector("#menu-display")` selects the area where menu items will appear +*/ + + +const menuData = { + breakfast: [ + { + name: "Dockside Pancake Stack", + description: "Fluffy pancakes served with warm maple syrup", + price: "$8" + }, + { + name: "Smoked Salmon Egg & Cheese Roll", + description: "Scrambled eggs, smoked salmon, and melted cheese on a toasted roll", + price: "$9" + }, + { + name: "Sunrise Fruit Bowl", + description: "Fresh seasonal fruit served chilled", + price: "$6" + } + ], + lunch: [ + { + name: "Mahi Sandwich", + description: "Grilled mahi mahi served on a toasted bun with fries", + price: "$13" + }, + { + name: "Crispy Fish Caesar Wrap", + description: "Crispy fish, romaine, and Caesar dressing wrapped fresh", + price: "$12" + }, + { + name: "New England Clam Chowder", + description: "Creamy clam chowder served hot with herbs", + price: "$8" + } + ], + brunch: [ + { + name: "Crab Cake & Waffles", + description: "Savory crab cakes served with golden waffles", + price: "$15" + }, + { + name: "Avocado Toast", + description: "Toasted bread topped with avocado and eggs", + price: "$10" + }, + { + name: "Brunch Mimosa", + description: "A sparkling brunch favorite", + price: "$9" + } + ], + dinner: [ + { + name: "Grilled Atlantic Salmon", + description: "Fresh salmon served with rice and seasonal vegetables", + price: "$18" + }, + { + name: "Garlic Shrimp Pasta", + description: "Tender shrimp served over creamy garlic pasta", + price: "$19" + }, + { + name: "Seaside Veggie Bowl", + description: "Roasted vegetables over quinoa with a light citrus finish", + price: "$15" + } + ], + happyHour: [ + { + name: "Mini Crab Sliders", + description: "Three mini crab sliders served fresh and hot", + price: "$7" + }, + { + name: "Loaded Wharf Fries", + description: "Crispy fries topped with cheese and bacon", + price: "$7" + }, + { + name: "Crispy Calamari", + description: "Lightly fried calamari served with marinara sauce", + price: "$8" + } + ], + drinks: [ + { + name: "Fresh Lemonade", + description: "Cold lemonade made fresh daily", + price: "$4" + }, + { + name: "Iced Coffee", + description: "Cold brew coffee served 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); + }); +}); + + + diff --git a/christopherbennett/style.css b/christopherbennett/style.css new file mode 100644 index 0000000..0b76c65 --- /dev/null +++ b/christopherbennett/style.css @@ -0,0 +1,408 @@ +:root { + --bg: #f4efe9; + --surface: #ffffff; + --surface-soft: #edf5f3; + --hero-bg: #5f9ea0; + --topbar: #2f6f55; + --primary: #2f6f55; + --primary-dark: #245743; + --accent: #d97a0b; + --text: #2d2d2d; + --muted: #666; + --border: #d8dfdc; + --shadow: rgba(0, 0, 0, 0.08); + --shadow-hover: rgba(0, 0, 0, 0.14); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Open Sans', sans-serif; + background: var(--bg); + color: var(--text); + line-height: 1.6; +} + +h1, h2, h3, h4 { + font-family: 'Playfair Display', serif; +} + +a { + text-decoration: none; + color: inherit; +} + +img { + max-width: 100%; + display: block; +} + +/* Top bar */ +.top-bar { + background: var(--topbar); + color: white; + text-align: center; + padding: 10px 15px; + font-size: 0.95rem; + font-weight: 600; +} + +/* Header */ +.site-header { + background: var(--surface); + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + padding: 22px 40px; + border-bottom: 1px solid var(--border); +} + +.logo-area { + display: flex; + align-items: center; + gap: 16px; +} + +.logo { + width: 82px; + height: 82px; + object-fit: cover; + border-radius: 50%; + background: #d9d9d9; +} + +.logo-area h1 { + font-size: 2rem; + color: var(--primary); + line-height: 1.1; +} + +.logo-area p { + color: var(--muted); + font-size: 0.95rem; +} + +.search-area { + flex: 1; + display: flex; + max-width: 500px; +} + +.search-area input { + flex: 1; + padding: 14px 16px; + border: 1px solid var(--border); + border-right: none; + border-radius: 10px 0 0 10px; + font-size: 1rem; + outline: none; +} + +.search-area input:focus { + border-color: var(--accent); +} + +.search-area button { + padding: 14px 18px; + border: none; + background: var(--accent); + color: white; + font-weight: 700; + border-radius: 0 10px 10px 0; + cursor: pointer; +} + +.search-area button:hover { + background: #b96408; +} + +.header-links { + display: flex; + gap: 18px; + font-weight: 600; + color: var(--primary); +} + +/* Nav */ +.main-nav { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 14px; + padding: 18px 20px; + background: var(--surface-soft); + border-bottom: 1px solid var(--border); +} + +.main-nav a { + background: var(--primary); + color: white; + padding: 10px 18px; + border-radius: 10px; + font-weight: 600; + transition: background 0.25s ease, transform 0.2s ease; +} + +.main-nav a:hover { + background: var(--primary-dark); + transform: translateY(-2px); +} + +/* Hero */ +.hero-banner { + min-height: 340px; + background: + linear-gradient(rgba(47, 111, 85, 0.35), rgba(47, 111, 85, 0.35)), + url("https://via.placeholder.com/1400x500") center/cover no-repeat; + display: flex; + align-items: center; + padding: 40px; +} + +.hero-overlay { + max-width: 600px; + color: white; + padding: 28px 30px; + background: rgba(0, 0, 0, 0.18); + border-radius: 16px; + backdrop-filter: blur(2px); +} + +.hero-overlay h2 { + font-size: 3rem; + margin-bottom: 12px; +} + +.hero-overlay p { + font-size: 1.1rem; + line-height: 1.7; +} + +/* Main layout */ +.shop-layout { + max-width: 1300px; + margin: 0 auto; + padding: 32px 24px 50px; + display: grid; + grid-template-columns: 280px 1fr; + gap: 28px; +} + +/* Sidebar */ +.sidebar { + background: var(--surface); + border-radius: 16px; + padding: 24px; + box-shadow: 0 6px 16px var(--shadow); + height: fit-content; + border: 1px solid #ececec; +} + +.sidebar h3 { + color: var(--primary); + font-size: 1.8rem; + margin-bottom: 22px; +} + +.filter-group + .filter-group { + margin-top: 28px; +} + +.filter-group h4 { + font-size: 1.2rem; + color: var(--primary); + margin-bottom: 12px; +} + +.filter-group ul { + list-style: none; +} + +.filter-group li + li { + margin-top: 10px; +} + +.filter-group a { + color: var(--text); + transition: color 0.2s ease; +} + +.filter-group a:hover { + color: var(--accent); +} + +/* Products area */ +.products-section { + min-width: 0; +} + +.products-topbar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 22px; + background: var(--surface); + padding: 16px 20px; + border-radius: 14px; + box-shadow: 0 4px 12px var(--shadow); +} + +.products-topbar p { + font-size: 1.05rem; + font-weight: 600; + color: var(--primary); +} + +.sort-controls { + display: flex; + align-items: center; + gap: 10px; +} + +.sort-controls label { + font-weight: 600; +} + +.sort-controls select { + padding: 10px 12px; + border-radius: 8px; + border: 1px solid var(--border); + font-size: 0.95rem; +} + +/* Grid */ +.product-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + gap: 22px; +} + +.product-card { + background: var(--surface); + border-radius: 16px; + overflow: hidden; + box-shadow: 0 6px 16px var(--shadow); + transition: transform 0.22s ease, box-shadow 0.22s ease; +} + +.product-card:hover { + transform: translateY(-6px); + box-shadow: 0 12px 24px var(--shadow-hover); +} + +.product-card img { + width: 100%; + height: 200px; + object-fit: cover; + background: #d7d7d7; +} + +.product-card h3 { + font-size: 1.4rem; + color: var(--primary); + padding: 18px 18px 8px; +} + +.product-card p { + color: var(--muted); + padding: 0 18px 12px; +} + +.price { + display: inline-block; + padding: 0 18px 20px; + font-weight: 700; + font-size: 1.2rem; + color: var(--accent); +} + +.menu-btn { + padding: 12px 18px; + border: none; + background-color: #2d6a4f; + color: white; + border-radius: 8px; + cursor: pointer; + font-size: 1rem; + margin-right: 10px; +} + +.menu-btn:hover { + background-color: #1b4332; +} + +.menu-btn.active { + background-color: #d97706; +} + +.menu-section { + max-width: 900px; margin: 0 auto; + margin: auto 0; +} + +.menu-controls { + padding: 2em 2em 2em 2em; + display: flex; + justify-content: center; +} + +/* Responsive */ +@media (max-width: 980px) { + .site-header { + flex-direction: column; + align-items: stretch; + padding: 20px; + } + + .search-area { + max-width: 100%; + } + + .header-links { + justify-content: center; + } + + .shop-layout { + grid-template-columns: 1fr; + } + + .sidebar { + order: 2; + } + + .products-section { + order: 1; + } +} + +@media (max-width: 640px) { + .hero-banner { + min-height: 280px; + padding: 20px; + } + + .hero-overlay { + padding: 22px 20px; + } + + .hero-overlay h2 { + font-size: 2.2rem; + } + + .products-topbar { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + + .main-nav a { + width: 100%; + max-width: 220px; + text-align: center; + } +} \ No newline at end of file