diff --git a/website/Cart/cart.css b/website/Cart/cart.css deleted file mode 100644 index 637996e..0000000 --- a/website/Cart/cart.css +++ /dev/null @@ -1,93 +0,0 @@ -/* Winkelmandje sectie */ -.cart { - width: 15%; /* Make the cart a bit smaller */ - padding: 20px; - background-color: #fff; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - margin-top: 80px; /* Increase margin to ensure it starts below the categories bar */ - position: fixed; /* Fix the cart to the right side */ - right: 0; /* Align the cart to the right */ - top: 60px; /* Ensure it starts below the categories bar */ - display: flex; - flex-direction: column; /* Ensure the content is arranged in a column */ -} - -.cart ul { - list-style-type: none; - padding: 0; -} - -.cart li { - margin-bottom: 10px; -} - -.cart-item button { - background-color: #d32f2f; - color: white; - border: none; - padding: 5px 10px; - cursor: pointer; - border-radius: 5px; -} - - -.cart-item { - display: flex; - justify-content: space-between; - padding: 10px 0; - border-bottom: 1px solid #ff9d3b; -} - -.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; -} - - -.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; -} diff --git a/website/Cart/cart.js b/website/Cart/cart.js deleted file mode 100644 index 3d1d9f0..0000000 --- a/website/Cart/cart.js +++ /dev/null @@ -1,66 +0,0 @@ -// Array to hold items added to the shopping cart -const cart = JSON.parse(localStorage.getItem('cart')) || []; -let cartCount = cart.length; // Initialize cart count - -// Function to add an item to the shopping cart -function addToCart(item) { - cart.push(item); // Add item to the cart array - localStorage.setItem('cart', JSON.stringify(cart)); - 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 = ` - ${item.title} - €${item.price.toFixed(2)} - - `; - 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); - localStorage.setItem('cart', JSON.stringify(cart)); - 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'; -}