Merge branch 'main' of https://github.com/Alvin-Zilverstand/Schoolkantine

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;
+}

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>
+
+
+

website/script.js

@@ -130,7 +130,3 @@ function getDescription(title) {
     return "";
 }
 
-// Functie om het modaal venster te sluiten
-function closeModal() {
-    document.getElementById('modal').style.display = 'none';
-}

website/style.css

@@ -133,3 +133,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;
+}