f

website/Cart/cart.css

@@ -0,0 +1,52 @@
+/* Winkelmandje sectie */
+.cart {
+    width: 15%;
+    background-color: #fff; /* Change background color to white */
+    padding: 20px;
+    height: 100vh;
+    overflow-y: auto;
+    order: 3; /* Ensure the cart is on the right */
+    position: fixed; /* Fix the cart to the right side */
+    right: 0; /* Align the cart to the right */
+    top: 0; /* Align the cart to the top */
+    display: flex;
+    flex-direction: column; /* Ensure the content is arranged in a column */
+}
+
+.cart-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.cart-item button {
+    background-color: #d32f2f;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.cart-item button:hover {
+    background-color: #b71c1c;
+}
+
+#order-button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    width: 100%;
+    text-align: center;
+    margin-top: 20px;
+    display: none; /* Hide the button by default */
+    align-self: flex-end; /* Ensure the button is at the bottom */
+}
+
+#order-button:hover {
+    background-color: #45a049;
+}

website/Cart/cart.js

@@ -0,0 +1,66 @@
+// Array to hold items added to the shopping cart
+const cart = [];
+let cartCount = 0; // Initialize cart count
+
+// 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();
+}
+
+// Function to update the shopping cart display
+function updateCart() {
+    const cartItemsContainer = document.getElementById("cart-items");
+    cartItemsContainer.innerHTML = '';
+    let totalPrice = 0;
+    cart.forEach((item, index) => {
+        const cartItemElement = document.createElement('li');
+        cartItemElement.className = 'cart-item';
+        cartItemElement.innerHTML = `
+            <span>${item.title}</span>
+            <span>€${item.price.toFixed(2)}</span>
+            <button onclick="removeFromCart(${index})">Verwijderen</button>
+        `;
+        cartItemsContainer.appendChild(cartItemElement);
+        totalPrice += item.price;
+    });
+    document.getElementById('total-price').innerText = totalPrice.toFixed(2);
+
+    // Show or hide the "Bestellen" button based on the cart's content
+    const orderButton = document.getElementById('order-button');
+    if (cart.length > 0) {
+        orderButton.style.display = 'block';
+    } else {
+        orderButton.style.display = 'none';
+    }
+}
+
+// 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
+}
+
+// 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
+    }
+}
+
+
+// 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';
+}