Refactor menu item categories and update display styles

website/index.html

@@ -14,7 +14,7 @@
     <div class="menu-list">
         <h2>Menu</h2>
         <div class="menu-item" onclick="showCategory('Broodjes')">Broodjes</div>
-        <div class="menu-item" onclick="showCategory('drinks')">Koude Dranken</div>
+        <div class="menu-item" onclick="showCategory('Koude-Dranken')">Koude Dranken</div>
         <div class="menu-item" onclick="showCategory('Warme-Dranken')">Warme Dranken</div>
         <div class="menu-item" onclick="showCategory('Snacks')">Snacks</div>
         <div class="menu-item" onclick="showCategory('deserts')">Ijsjes</div>

website/script.js

@@ -11,12 +11,18 @@ function showCategory(category) {
             { title: "Broodje Gezond", imageSrc: "media/broodje-gezond.jpg", price: 3.50 },
             { title: "Broodje Kaas", imageSrc: "media/broodje-kaas.jpg", price: 3.00 },
         ];
-    } else if (category === 'drinks') {
+    } else if (category === 'Koude-Dranken') {
         items = [
             { title: "Spa Water", imageSrc: "media/spa.webp", price: 1.00 },
             { title: "Cola", imageSrc: "media/cola.jpg", price: 1.50 },
+        ]; 
+    } else if (category === 'Warme-Dranken') {
+        items = [
+            { title: "Chocomel", imageSrc: "media/chocomel.jpg", price: 1.00 },
+            { title: "Koffie", imageSrc: "media/koffie.jpg", price: 1.50 },
         ];
-    } else if (category === 'Snacks') {
+    }
+    else if (category === 'Snacks') {
         items = [
             { title: "Frikandel", imageSrc: "media/frikandel.jpg", price: 2.00 },
             { title: "Bitterballen", imageSrc: "media/bitterballen.jpg", price: 2.50 },

website/style.css

@@ -34,7 +34,6 @@ body {
 /* Productweergave in een grid */
 .product-display {
     width: 70%;
-    display: flex;
     flex-wrap: wrap;
     padding: 20px;
     justify-content: space-around;