diff --git a/website/cart.css b/website/cart.css new file mode 100644 index 0000000..5bf9ec8 --- /dev/null +++ b/website/cart.css @@ -0,0 +1,52 @@ +/* Winkelmandje sectie */ +.cart { + width: 30%; + 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; +} diff --git a/website/cart.js b/website/cart.js new file mode 100644 index 0000000..d90e190 --- /dev/null +++ b/website/cart.js @@ -0,0 +1,45 @@ +// 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 + updateCart(); + closeModal(); +} + +// Functie om het winkelwagentje bij te werken +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'; + } +} + +// Functie om een item uit het winkelwagentje te verwijderen +function removeFromCart(index) { + cart.splice(index, 1); + updateCart(); +} + +// Initial call to updateCart to ensure the button is hidden on page load +updateCart(); diff --git a/website/index.html b/website/index.html index 9b709e7..12a1be9 100644 --- a/website/index.html +++ b/website/index.html @@ -5,6 +5,7 @@ Het hoofdmenu van de Mees + @@ -51,4 +52,5 @@ + diff --git a/website/media/spa.jpg b/website/media/spa.jpg deleted file mode 100644 index d3fb895..0000000 Binary files a/website/media/spa.jpg and /dev/null differ diff --git a/website/media/spa.webp b/website/media/spa.webp new file mode 100644 index 0000000..11e2a95 Binary files /dev/null and b/website/media/spa.webp differ diff --git a/website/script.js b/website/script.js index ae8d05b..b0822dc 100644 --- a/website/script.js +++ b/website/script.js @@ -1,6 +1,3 @@ -// Array to hold items added to the shopping cart -const cart = []; - // Functie om de details van een geselecteerd item weer te geven function showItemDetails(item) { var title = ""; @@ -16,7 +13,7 @@ function showItemDetails(item) { price = 3.50; } else if (item === 'drinks') { title = "Spa Water"; - imageSrc = "media/spa.jpg"; + imageSrc = "media/spa.webp"; description = "Koude verfrissende water."; price = 1.00; } else if (item === 'Snacks') { @@ -64,46 +61,6 @@ function showItemDetails(item) { document.getElementById("modal").style.display = "block"; } -// 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 - updateCart(); - closeModal(); -} - -// Functie om het winkelwagentje bij te werken -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'; - } -} - -// Functie om een item uit het winkelwagentje te verwijderen -function removeFromCart(index) { - cart.splice(index, 1); - updateCart(); -} - // Functie om het modaal venster te sluiten function closeModal() { document.getElementById("modal").style.display = "none"; @@ -115,6 +72,3 @@ window.onclick = function(event) { closeModal(); } } - -// Initial call to updateCart to ensure the button is hidden on page load -updateCart(); diff --git a/website/style.css b/website/style.css index a9bb64e..99299ef 100644 --- a/website/style.css +++ b/website/style.css @@ -73,59 +73,6 @@ body { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } -/* Winkelmandje sectie */ -.cart { - width: 30%; - 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; -} - /* Modaal venster (pop-up) */ .modal { display: none;