sad

website/index.html

@@ -13,14 +13,19 @@
     <!-- Linkerkant menu -->
     <div class="menu-list">
         <h2>Menu</h2>
-        <div class="menu-item" onclick="showItemDetails('Broodjes')">Broodjes</div>
-        <div class="menu-item" onclick="showItemDetails('Koude-Dranken')">Koude Dranken</div>
-        <div class="menu-item" onclick="showItemDetails('Warme-Dranken')">Warme Dranken</div>
-        <div class="menu-item" onclick="showItemDetails('Snacks')">Snacks</div>
-        <div class="menu-item" onclick="showItemDetails('deserts')">Ijsjes</div>
-        <div class="menu-item" onclick="showItemDetails('Deals')">Deals</div>
-        <div class="menu-item" onclick="showItemDetails('Soepen')">Soepen</div>
-        <div class="menu-item" onclick="showItemDetails('Salades')">Salades</div>
+        <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('Warme-Dranken')">Warme Dranken</div>
+        <div class="menu-item" onclick="showCategory('Snacks')">Snacks</div>
+        <div class="menu-item" onclick="showCategory('deserts')">Ijsjes</div>
+        <div class="menu-item" onclick="showCategory('Deals')">Deals</div>
+        <div class="menu-item" onclick="showCategory('Soepen')">Soepen</div>
+        <div class="menu-item" onclick="showCategory('Salades')">Salades</div>
+    </div>
+
+    <!-- Productweergave -->
+    <div id="product-display" class="product-display">
+        <!-- Producten worden hier dynamisch toegevoegd -->
     </div>
 
     <!-- Modaal venster voor grotere afbeelding en beschrijving -->
@@ -49,7 +54,7 @@
         <p>&copy; 2025 Vista </p>
     </footer>
 
+    <script src="script.js"></script>
+    <script src="cart.js"></script>
 </body>
-<script src="script.js"></script>
-<script src="cart.js"></script>
 </html>

website/script.js

@@ -21,15 +21,25 @@ function showCategory(category) {
             { title: "Frikandel", imageSrc: "media/frikandel.jpg", price: 2.00 },
             { title: "Bitterballen", imageSrc: "media/bitterballen.jpg", price: 2.50 },
         ];
-    }else if (category === 'Snacks') {
+    } else if (category === 'deserts') {
         items = [
             { title: "Ijsjes", imageSrc: "media/Ijs.png", price: 2.00 },
-            { title: "Bitterballen", imageSrc: "media/bitterballen.jpg", price: 2.50 },
+            { title: "Sorbet", imageSrc: "media/sorbet.jpg", price: 2.50 },
         ];
-    }else if (category === 'Snacks') {
+    } else if (category === 'Deals') {
         items = [
-            { title: "Deals", imageSrc: "media/deals.jpg", price: 2.00 },
-            { title: "Bitterballen", imageSrc: "media/bitterballen.jpg", price: 2.50 },
+            { title: "Lunch Deal", imageSrc: "media/deals.jpg", price: 5.00 },
+            { title: "Diner Deal", imageSrc: "media/deals.jpg", price: 10.00 },
+        ];
+    } else if (category === 'Soepen') {
+        items = [
+            { title: "Tomatensoep", imageSrc: "media/soep.jpg", price: 2.50 },
+            { title: "Kippensoep", imageSrc: "media/soep.jpg", price: 2.80 },
+        ];
+    } else if (category === 'Salades') {
+        items = [
+            { title: "Caesar Salade", imageSrc: "media/salade.jpg", price: 4.00 },
+            { title: "Griekse Salade", imageSrc: "media/salade.jpg", price: 4.50 },
         ];
     }
 
@@ -51,54 +61,10 @@ function showCategory(category) {
 
 // Functie om de details van een item weer te geven in het modaal
 function showItemDetails(item) {
-    var title = "";
-    var imageSrc = "";
-    var description = "";
-    var price = 0;
-
-    // Afhankelijk van het geselecteerde item, pas de details aan
-    if (item === 'Broodjes') {
-        title = "Broodje Gezond";
-        imageSrc = "media/broodje-gezond.jpg";
-        description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.";
-        price = 3.50;
-    } else if (item === 'Koude-Dranken') {
-        title = "Spa Water";
-        imageSrc = "media/spa.webp";
-        description = "Koude verfrissende water.";
-        price = 1.00;
-    } else if (item === 'Warme-Dranken') {
-        title = "Warme dranken";
-        imageSrc = "media/chocomel.jpg";
-        description = "een warme drank naar keuze";
-        price = 2,59;
-    } else if (item === 'Snacks') {
-        title = "Frikandel";
-        imageSrc = "media/frikandel.jpg";
-        description = "Een frikandel, dat wil je wel!";
-        price = 2.00;
-    } else if (item === 'deserts') {
-        title = "Ijsjes";
-        imageSrc = "media/ijs.png";
-        description = "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!).";
-        price = 1.50;
-    } else if (item === 'Deals') {
-        title = "Deals";
-        imageSrc = "media/deals.jpg"; 
-        description = "Onze beste deals met de beste prijzen!";
-        price = 10.00;
-    } else if (item === 'Soepen') {
-        title = "Soepen";
-        imageSrc = "media/soep.jpg";
-        description = "Soep van de dag! (Allergieën? Meld het bij ons!)";
-        price = 2.50;
-    } else if (item === 'Salades') {
-        title = "Salades";
-        imageSrc = "media/salade.jpg";
-        description = "Een heerlijke salade met verse groenten en een dressing naar keuze.";
-        price = 3.00;
-
-    }
+    const title = item.title;
+    const imageSrc = item.imageSrc;
+    const description = getDescription(item.title); // Haal de beschrijving dynamisch op
+    const price = item.price;
 
     // Update de inhoud van het modaal venster
     document.getElementById("modal-title").innerText = title;
@@ -112,6 +78,28 @@ function showItemDetails(item) {
     document.getElementById('modal').style.display = 'block';
 }
 
+// Functie om de beschrijving op te halen afhankelijk van de titel
+function getDescription(title) {
+    if (title === "Broodje Gezond") {
+        return "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.";
+    } else if (title === "Spa Water") {
+        return "Koude verfrissende water.";
+    } else if (title === "Warme dranken") {
+        return "Een warme drank naar keuze.";
+    } else if (title === "Frikandel") {
+        return "Een frikandel, dat wil je wel!";
+    } else if (title === "Ijsjes") {
+        return "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!).";
+    } else if (title === "Deals") {
+        return "Onze beste deals met de beste prijzen!";
+    } else if (title === "Soepen") {
+        return "Soep van de dag! (Allergieën? Meld het bij ons!)";
+    } else if (title === "Salades") {
+        return "Een heerlijke salade met verse groenten en een dressing naar keuze.";
+    }
+    return "";
+}
+
 // Functie om het modaal venster te sluiten
 function closeModal() {
     document.getElementById('modal').style.display = 'none';

website/style.css

@@ -130,3 +130,4 @@ body {
 #add-to-cart:hover {
     background-color: #45a049;
 }
+