Totaal: €0.00
- + + + From d1d4813019848f844e2fa58671055dab1b51ef8f Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Wed, 19 Feb 2025 13:20:19 +0100 Subject: [PATCH 2/3] Update menu bar width for improved layout consistency --- website/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/style.css b/website/style.css index 044d53c..58408e1 100644 --- a/website/style.css +++ b/website/style.css @@ -9,7 +9,7 @@ body { /* Top bar menu */ .menu-bar { - width: 75%; + width: 75%; /* Use 75% of the screen width on the first page */ background-color: #ffffff; padding: 10px 0; display: flex; @@ -25,6 +25,7 @@ body { } .menu-bar.top { + width: 100%; /* Use 100% of the screen width when at the top */ position: fixed; /* Fix the top bar to the top */ top: 0; left: 0; From 8e99818cecc723c8385156ecc16da4ba6c36d78d Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Wed, 19 Feb 2025 13:22:56 +0100 Subject: [PATCH 3/3] Remove cart CSS and JavaScript files to streamline the project --- website/Cart/cart.css | 93 ------------------------------------------- website/Cart/cart.js | 66 ------------------------------ 2 files changed, 159 deletions(-) delete mode 100644 website/Cart/cart.css delete mode 100644 website/Cart/cart.js 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'; -}