gg

website/Cart/cart.css

@@ -1,6 +1,6 @@
 /* Winkelmandje sectie */
 .cart {
-    width: 20%;
+    width: 15%;
     background-color: #fff; /* Change background color to white */
     padding: 20px;
     height: 100vh;

website/Cart/cart.js

@@ -1,20 +1,17 @@
-
-
 // Array to hold items added to the shopping cart
 const cart = [];
+let cartCount = 0; // Initialize cart count
 
-
-
-// Functie om een item aan het winkelwagentje toe te voegen
+// Function to add an item to the shopping cart
 function addToCart(item) {
     cart.unshift(item); // Add item to the beginning of the cart array
     updateCart();
+    cartCount++; // Increment cart count
+    updateCartCountDisplay(); // Update the cart count display
     closeModal();
 }
 
-
-
-// Functie om het winkelwagentje bij te werken
+// Function to update the shopping cart display
 function updateCart() {
     const cartItemsContainer = document.getElementById("cart-items");
     cartItemsContainer.innerHTML = '';
@@ -41,19 +38,32 @@ function updateCart() {
     }
 }
 
-
-// Functie om een item uit het winkelwagentje te verwijderen
+// Function to remove an item from the shopping cart
 function removeFromCart(index) {
     cart.splice(index, 1);
     updateCart();
+    cartCount--; // Decrement cart count
+    updateCartCountDisplay(); // Update the cart count display
 }
 
-// Initial call to updateCart to ensure the button is hidden on page load
-updateCart();
+// Function to update the cart count display
+function updateCartCountDisplay() {
+    const cartCountElement = document.getElementById("cart-count"); // Get the element to display the count
+    if (cartCountElement) { // Check if the element exists
+        cartCountElement.textContent = cartCount; // Update the text content with the cart count
+    }
+}
 
-// Functie om het modaal venster te sluiten
+
+// Initial calls
+updateCart();
+updateCartCountDisplay(); // Initialize the cart count on page load
+
+
+// Function to close the modal window
 function closeModal() {
     document.getElementById('modal').style.display = 'none';
+<<<<<<< HEAD:website/cart.js
 }
 
 let cartCount = 0;
@@ -62,3 +72,6 @@ function addToCart() {
     cartCount++;
     document.querySelector('.cart-count').textContent = cartCount;
 }
+=======
+}
+>>>>>>> 1f418f9c8547c52f6394b681eb5ce02ee196b69a:website/Cart/cart.js

website/index.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Het hoofdmenu van de Mees</title>
     <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="cart.css">
+    <link rel="stylesheet" href="Cart/cart.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="icon" href="media/favicon.ico" type="image/x-icon">
 </head>
 
@@ -23,6 +24,7 @@
         <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 class="menu-item" onclick="showCategory('Sausjes')">Sausjes</div>
     </div>
 
     <!-- Productweergave -->
@@ -52,23 +54,19 @@
         <button id="order-button">Bestellen</button>
     </div>
 
+    <!-- Winkelwagen icoon -->
+    <div class="cart-icon">
+        <i class="fas fa-shopping-cart"></i>
+        <span id="cart-count" class="cart-count">0</span> <!-- Aantal producten -->
+    </div>
+
     <footer>
         <p>&copy; 2025 Vista </p>
     </footer>
 
 </div>
     <script src="script.js"></script>
-    <script src="cart.js"></script>
+    <script src="Cart/cart.js"></script>
 </body>
 </html>
 
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-<!-- Winkelwagen icoon -->
-<div class="cart-icon">
-    <i class="fas fa-shopping-cart"></i>
-    <span class="cart-count">0</span> <!-- Aantal producten -->
-</div>
-
-
-
-

website/script.js

@@ -5,6 +5,7 @@ function showCategory(category) {
 
     let items = [];
 
+
     // Afhankelijk van de gekozen categorie, voeg je de juiste producten toe
     if (category === 'Broodjes') {
         items = [
@@ -71,8 +72,12 @@ function showCategory(category) {
             { title: "Krokante Kip Salade", imageSrc: "media/krokante-kip.jpg", price: 3.00 },
             { title: "Aardappel Salade", imageSrc: "media/aardappel.jpg", price: 2.50 },
         ];
+    } else if (category === 'Sausjes') {
+    items = [
+        { title: "Ketchup", imageSrc: "https://www.ahealthylife.nl/wp-content/uploads/2021/06/Ketchup_voedingswaarde.jpg", price: 0.25 },
+        { title: "Mayonaise", imageSrc: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC4FVmHO_hK3mw43z0fuHv1OFUr-hhsfGe1A&s", price: 0.25 }
+    	];
     }
-
     // Voeg de items toe aan de weergave
     items.forEach(item => {
         const productBox = document.createElement('div');
@@ -126,7 +131,8 @@ function getDescription(title) {
         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.";
+    }   else if (title === "Sausjes") {
+        return "Kies de saus naar je keuze!";
     }
     return "";
 }
-

website/welcome.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>De Welkompagina van de Mees</title>
+    <title>De welkompagina van de Mees</title>
     <link rel="stylesheet" href="welcome.css">
     <link rel="icon" href="media/favicon.ico" type="image/x-icon">
 </head>
@@ -12,11 +12,11 @@
 
     <div class="welcome">
         <div class="circle-wrapper">
-          <h1>Assesment 2</h1>
-          <p>Van Johnny Kindermann</p>
+          <h1>Mees</h1>
+          <p>Naar menu</p>
         </div>
         <a href="index.html">
-            <button>Bestellen</button>
+            <button>Menu</button>
         </a>
     </div>