uy

website/index.html

@@ -16,12 +16,11 @@
         <div class="menu-item" onclick="showItemDetails('drinks')">Drinken</div>
         <div class="menu-item" onclick="showItemDetails('Snacks')">Snacks</div>
         <div class="menu-item" onclick="showItemDetails('deserts')">Ijsjes</div>
-        <!--Deals-->
+    </div>
-        <div class="menu-item" onclick="showItemDetails('Deals')">Deals</div>
+
-        <!-- Soepen -->
+    <!-- Rechterkant: Productafbeeldingen in mooie hokjes -->
-        <div class="menu-item" onclick="showItemDetails('Soepen')">Soepen</div>
+    <div id="product-display" class="product-display">
-        <!-- placeholder-->
+        <!-- Hier komen de items die worden weergegeven als afbeeldingen -->
-        <div class="menu-item" onclick="showItemDetails('Placeholder2')">Placeholder 2</div>
     </div>
 
     <!-- Modaal venster voor grotere afbeelding en beschrijving -->
@@ -35,7 +34,7 @@
     </div>
 
     <footer>
-        <p>&copy; 2025 vista </p>
+        <p>&copy; 2025 McDonald's</p>
     </footer>
 
     <script src="script.js"></script>

website/script.js

@@ -2,43 +2,62 @@
 function showItemDetails(item) {
     var items = [];
 
-            // Afhankelijk van het geselecteerde item, pas de details aan
+    // Afhankelijk van het geselecteerde item, voeg de producten toe
-             // Stel de inhoud in afhankelijk van het geselecteerde item
     if (item === 'Broodjes') {
-        title = "Broodje Gezond";
+        items = [
-        imagesrc = "broodje-gezond.jpg";
+            {
-        description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.";
+                title: "Broodje Gezond",
+                image: "https://thumbs.dreamstime.com/b/submarine-sandwich-ham-cheese-clipping-path-egg-tomato-cucumber-lettuce-white-48580716.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";
+        items = [
-        imagesrc = "spa.jpg";
+            {
-        description = "Koude verfrissende water.";
+                title: "Spa Water",
+                image: "https://m.media-amazon.com/images/I/71VrczELeaL._AC_SY741_.jpg",
+                description: "Koude verfrissende water."
+            }
+        ];
     } else if (item === 'Snacks') {
-        title = "Frikandel";
+        items = [
-        imagesrc = "frikandel.jpg";
+            {
-        description = "Een frikandel, dat wil je wel!";
+                title: "Frikandel",
+                image: "https://boshuis.huisjebezorgd.nl/wp-content/uploads/2020/03/29512948_652505005141152_1601506864166600704_o.jpg",
+                description: "Een frikandel, dat wil je wel!"
+            }
+        ];
     } else if (item === 'deserts') {
-        title = "Ijsjes";
+        items = [
-        imagesrc = "ijs.png";
+            {
-        description = "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!).";
+                title: "Ijsjes",
-    }   else if (item === 'Deals') {
+                image: "https://th.bing.com/th/id/R.5e81f369a0da6a92106391e7b0a5119b?rik=KD0kNGiRjGM22g&riu=http%3a%2f%2fwww.brookersicecream.com%2fwp-content%2fuploads%2f2018%2f09%2fIce-Cream-Fan.png&ehk=%2bfZOURa%2fKgmE4uuuESx9We3OBrwXpPaaMZpJaBJt4bo%3d&risl=&pid=ImgRaw&r=0",
-                title = "Deals";
+                description: "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!)."
-                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.";
     }
 
+    // Leeg de productweergave
+    const productDisplay = document.getElementById('product-display');
+    productDisplay.innerHTML = '';
 
-            // Toon de details aan de rechterkant
+    // Voeg de items toe aan de weergave
-            document.getElementById("item-title").innerText = title;
+    items.forEach(item => {
-            document.getElementById("item-image").src = imageSrc;
+        const productBox = document.createElement('div');
-            document.getElementById("item-description").innerText = description;
+        productBox.classList.add('product-box');
+        productBox.innerHTML = `
+            <img src="${item.image}" alt="${item.title}" onclick="openModal('${item.title}', '${item.image}', '${item.description}')">
+            <h3>${item.title}</h3>
+        `;
+        productDisplay.appendChild(productBox);
+    });
+}
+
+// Functie om het modaal venster te openen
+function openModal(title, image, description) {
+    document.getElementById("modal-title").innerText = title;
+    document.getElementById("modal-image").src = image;
+    document.getElementById("modal-description").innerText = description;
 
     // Zet het modaal venster zichtbaar
     document.getElementById("modal").style.display = "block";

website/style.css

@@ -53,23 +53,22 @@ body {
     cursor: pointer;
 }
 
-.menu-detail img {
+.product-box img {
-    width: 70%;
+    width: 100%;
-    max-width: 300px;
+    height: auto;
-    max-height: 400px;
+    transition: transform 0.3s ease;
-    margin-bottom: 20px;
 }
 
-.menu-detail h2 {
+.product-box:hover img {
+    transform: scale(1.1);
+}
+
+.product-box h3 {
+    font-size: 1.1em;
     color: #d32f2f;
     margin: 10px 0;
 }
 
-.menu-item:hover {
-    background-color: #f59e42;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
 /* Modaal venster (pop-up) */
 .modal {
     display: none;