From 462cd5f20637473b007ed310e395bb36c32ff44b Mon Sep 17 00:00:00 2001
From: Dylanomz <527457@vistacollege.nl>
Date: Thu, 13 Feb 2025 12:20:21 +0100
Subject: [PATCH] k

---
 website/cart.js    | 19 ++++++++++++++++
 website/index.html | 29 ++++++++++++++++++++++++
 website/script.js  |  4 ----
 website/style.css  | 56 ++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/website/cart.js b/website/cart.js
index d90e190..f936961 100644
--- a/website/cart.js
+++ b/website/cart.js
@@ -1,6 +1,10 @@
+
+
 // Array to hold items added to the shopping cart
 const cart = [];
 
+
+
 // Functie om een item aan het winkelwagentje toe te voegen
 function addToCart(item) {
     cart.unshift(item); // Add item to the beginning of the cart array
@@ -8,6 +12,8 @@ function addToCart(item) {
     closeModal();
 }
 
+
+
 // Functie om het winkelwagentje bij te werken
 function updateCart() {
     const cartItemsContainer = document.getElementById("cart-items");
@@ -35,6 +41,7 @@ function updateCart() {
     }
 }
 
+
 // Functie om een item uit het winkelwagentje te verwijderen
 function removeFromCart(index) {
     cart.splice(index, 1);
@@ -43,3 +50,15 @@ function removeFromCart(index) {
 
 // Initial call to updateCart to ensure the button is hidden on page load
 updateCart();
+
+// Functie om het modaal venster te sluiten
+function closeModal() {
+    document.getElementById('modal').style.display = 'none';
+}
+
+let cartCount = 0;
+
+function addToCart() {
+    cartCount++;
+    document.querySelector('.cart-count').textContent = cartCount;
+}
diff --git a/website/index.html b/website/index.html
index 4b9392e..5c2d5ab 100644
--- a/website/index.html
+++ b/website/index.html
@@ -61,3 +61,32 @@
     <script src="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>
+
+<!-- Producten -->
+<div class="products">
+    <div class="product">
+        <h3>Product 1</h3>
+        <p>Prijs: €10</p>
+        <button onclick="addToCart()">Toevoegen</button>
+    </div>
+    <div class="product">
+        <h3>Product 2</h3>
+        <p>Prijs: €15</p>
+        <button onclick="addToCart()">Toevoegen</button>
+    </div>
+    <div class="product">
+        <h3>Product 3</h3>
+        <p>Prijs: €20</p>
+        <button onclick="addToCart()">Toevoegen</button>
+    </div>
+</div>
+
+
+
diff --git a/website/script.js b/website/script.js
index 5bf6475..d34a56d 100644
--- a/website/script.js
+++ b/website/script.js
@@ -124,7 +124,3 @@ function getDescription(title) {
     return "";
 }
 
-// Functie om het modaal venster te sluiten
-function closeModal() {
-    document.getElementById('modal').style.display = 'none';
-}
diff --git a/website/style.css b/website/style.css
index 0e9db20..bc9a5eb 100644
--- a/website/style.css
+++ b/website/style.css
@@ -134,3 +134,59 @@ body {
 #add-to-cart:hover {
     background-color: #45a049;
 }
+
+ /* Winkelwagen-icoon */
+ .cart-icon {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: #ff6600;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 50%;
+    font-size: 20px;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.cart-icon:hover {
+    background-color: #e65c00;
+}
+
+.cart-count {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background: red;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 3px 6px;
+    border-radius: 50%;
+}
+
+/* Productstijl */
+.products {
+    display: flex;
+    gap: 20px;
+    margin: 50px;
+}
+
+.product {
+    border: 1px solid #ddd;
+    padding: 20px;
+    text-align: center;
+}
+
+.product button {
+    background-color: #ff6600;
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.product button:hover {
+    background-color: #e65c00;
+}
\ No newline at end of file