From 3ebac37168f695447d0c1c1dfc6923198a97ecc3 Mon Sep 17 00:00:00 2001
From: vista-man <524715@vistacollege.nl>
Date: Wed, 12 Feb 2025 11:02:52 +0100
Subject: [PATCH] Refactor item detail display logic and improve modal
 functionality

---
 website/script.js | 57 ++++++++++++++++++++++++++---------------------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/website/script.js b/website/script.js
index 5499169..a53e8bb 100644
--- a/website/script.js
+++ b/website/script.js
@@ -1,44 +1,44 @@
 // Functie om de details van een geselecteerd item weer te geven
 function showItemDetails(item) {
-    var items = [];
+    var title = "";
+    var imageSrc = "";
+    var description = "";
 
-            // Afhankelijk van het geselecteerde item, pas de details aan
-             // Stel de inhoud in afhankelijk van het geselecteerde item
+    // Afhankelijk van het geselecteerde item, pas de details aan
     if (item === 'Broodjes') {
         title = "Broodje Gezond";
-        imagesrc = "broodje-gezond.jpg";
+        imageSrc = "media/broodje-gezond.jpg";
         description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.";
     } else if (item === 'drinks') {
         title = "Spa Water";
-        imagesrc = "spa.jpg";
+        imageSrc = "media/spa.jpg";
         description = "Koude verfrissende water.";
     } else if (item === 'Snacks') {
         title = "Frikandel";
-        imagesrc = "frikandel.jpg";
+        imageSrc = "media/frikandel.jpg";
         description = "Een frikandel, dat wil je wel!";
     } else if (item === 'deserts') {
         title = "Ijsjes";
-        imagesrc = "ijs.png";
+        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!).";
-    }   else if (item === 'Deals') {
-                title = "Deals";
-                imageSrc = "media/deals.jpg"; 
-                description = "Onze beste deals met de beste prijzen!";
-            }   else if (item === 'soep') {
-                title = "soepen";
-                imageSrc = "media/soep.jpg";
-                description = "soep van de dag! (Allergieen? Meld het bij ons!";
-            }   else if (item === 'Placeholder 2') {
-                title = "Placeholder 2";
-                imageSrc = "";
-                description = "Beschrijving voor Placeholder 2.";
-            }
-    
+    } else if (item === 'Deals') {
+        title = "Deals";
+        imageSrc = "media/deals.jpg"; 
+        description = "Onze beste deals met de beste prijzen!";
+    } else if (item === 'Soepen') {
+        title = "Soepen";
+        imageSrc = "media/soep.jpg";
+        description = "Soep van de dag! (Allergieën? Meld het bij ons!)";
+    } else if (item === 'Placeholder2') {
+        title = "Placeholder 2";
+        imageSrc = "";
+        description = "Beschrijving voor Placeholder 2.";
+    }
 
-            // Toon de details aan de rechterkant
-            document.getElementById("item-title").innerText = title;
-            document.getElementById("item-image").src = imageSrc;
-            document.getElementById("item-description").innerText = description;
+    // Update de inhoud van het modaal venster
+    document.getElementById("modal-title").innerText = title;
+    document.getElementById("modal-image").src = imageSrc;
+    document.getElementById("modal-description").innerText = description;
 
     // Zet het modaal venster zichtbaar
     document.getElementById("modal").style.display = "block";
@@ -48,3 +48,10 @@ function showItemDetails(item) {
 function closeModal() {
     document.getElementById("modal").style.display = "none";
 }
+
+// Zorg ervoor dat het modaal venster sluit wanneer er buiten het venster wordt geklikt
+window.onclick = function(event) {
+    if (event.target == document.getElementById("modal")) {
+        closeModal();
+    }
+}