code-differently · BennettDeveloper · Apr 1, 2026 · Apr 1, 2026
diff --git a/christopherbennett/images/SunriseBistroSS.png b/christopherbennett/images/SunriseBistroSS.png
diff --git a/christopherbennett/images/mahimahifish.png b/christopherbennett/images/mahimahifish.png
diff --git a/christopherbennett/index.html b/christopherbennett/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Mahi-Market</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Playfair+Display:wght@600;700&display=swap"
+    rel="stylesheet"
+  />
+
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="top-bar">
+    Fresh catches weekly | Open Mon-Sat 8AM-7PM
+  </div>
+
+  <header class="site-header">
+    <div class="branding">
+      <img src="images/mahimahifish.png" alt="Mahi-Market Logo" class="logo" />
+      <div class="brand-text">
+        <h1>Mahi-Market</h1>
+        <p>Fresh fish to include for every lunch!</p>
+      </div>
+    </div>
+
+    <div class="search-area">
+      <input type="text" placeholder="Search seafood, meals, specials..." />
+      <button type="button">Search</button>
+    </div>
+
+    <div class="header-links">
+      Follow the Waves, Find the Fish
+    </div>
+  </header>
+
+  <nav class="menu-controls">
+    <button class="menu-btn active" data-category="breakfast">Breakfast</button>
+    <button class="menu-btn" data-category="lunch">Lunch</button>
+    <button class="menu-btn" data-category="brunch">Brunch</button>
+    <button class="menu-btn" data-category="dinner">Dinner</button>
+    <button class="menu-btn" data-category="happyHour">Happy Hour</button>
+    <button class="menu-btn" data-category="drinks">Drinks</button>
+  </nav>
+
+  <section class="hero-banner">
+    <div class="hero-overlay">
+      <h2>Our Seafood Market</h2>
+      <p>
+        Choose from a wide variety of fresh seafood, handcrafted meals,
+        and market favorites made for easy, delicious dining.
+      </p>
+    </div>
+  </section>
+
+  <main class="shop-layout">
+    <aside class="sidebar">
+      <h3>Browse Market</h3>
+
+      <div class="filter-group">
+        <h4>Popular Picks</h4>
+        <ul>
+          <li><a href="#">Fresh Catch</a></li>
+          <li><a href="#">Lunch Specials</a></li>
+          <li><a href="#">Chef Favorites</a></li>
+          <li><a href="#">Seasonal Plates</a></li>
+        </ul>
+      </div>
+
+      <div class="filter-group">
+        <h4>Featured Seafood</h4>
+        <ul>
+          <li><a href="#">Salmon</a></li>
+          <li><a href="#">Mahi Mahi</a></li>
+          <li><a href="#">Cod</a></li>
+          <li><a href="#">Halibut</a></li>
+          <li><a href="#">Shrimp</a></li>
+        </ul>
+      </div>
+    </aside>
+
+    <section class="menu-section">
+      <div class="products-topbar">
+        <h2 id="menu-title">Menu</h2>
+
+        <div class="sort-controls">
+          <label for="sort">Sort By:</label>
+          <select id="sort">
+            <option>Featured</option>
+            <option>Price: Low to High</option>
+            <option>Price: High to Low</option>
+            <option>Newest</option>
+          </select>
+        </div>
+      </div>
+
+      <div id="menu-display">
+        <p>Select a category to view menu items.</p>
+      </div>
+    </section>
+  </main>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/christopherbennett/results/reflectionQuestions.md 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
@@ -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 = `
+      <h3>${item.name}</h3>
+      <p>${item.description}</p>
+      <p class="price">${item.price}</p>
+    `;
+
+    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);
+  });
+});
+
+
+