diff --git a/website/cart.js b/website/cart.js index d90e190..7048aac 100644 --- a/website/cart.js +++ b/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,9 @@ 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'; +} + diff --git a/website/index.html b/website/index.html index 4b9392e..6c24724 100644 --- a/website/index.html +++ b/website/index.html @@ -6,6 +6,7 @@ Het hoofdmenu van de Mees + @@ -52,6 +53,12 @@ + +
+ + 0 +
+ @@ -61,3 +68,4 @@ + diff --git a/website/script.js b/website/script.js index fc6c485..4bbb5d5 100644 --- a/website/script.js +++ b/website/script.js @@ -25,7 +25,9 @@ function showCategory(category) { { title: "Fanta orange zero", imageSrc: "media/fanta-zero.jpg", price: 1.80 }, { title: "Fanta exotic zero", imageSrc: "media/fanta-exotic-zero.jpg", price: 1.80 }, { title: "Fanta lemon zero", imageSrc: "media/fanta-lemon-zero.jpg", price: 1.80 }, - { title: "Fanta cassis", imageSrc: "media/fanta-cassis.jpg", price: 1.80 }, ] + { title: "Ice tea", imageSrc: "https://www.manutan.nl/img/S/GRP/ST/AIG12165970.jpg", price: 1.80}, + { title: "Fanta cassis", imageSrc: "media/fanta-cassis.jpg", price: 1.80 }, + { title: "Milkshake", imageSrc: "https://s3.amazonaws.com/static.realcaliforniamilk.com/media/recipes_2/sunset-sprinkle-shakes.jpg", price: 2.50 }, ] } else if (category === 'Warme-Dranken') { items = [ { title: "Chocomel", imageSrc: "media/choco-gs.jpg", price: 1.00 }, @@ -47,8 +49,8 @@ function showCategory(category) { items = [ { title: "Ijsjes", imageSrc: "media/Ijs.png", price: 1.50 }, { title: "Sorbet", imageSrc: "media/sorbet.webp", price: 2.50 }, - { title: "Softijs", imageSrc: "https://www.yourlittleblackbook.me/wp-content/uploads/2023/07/lekkerste-softijs-amsterdam.jpg", price: 2.50 }, - { title: "Sundea ijs", imageSrc: "https://easyfoodheesch.nl/wp-content/uploads/2021/02/IMG_7402.jpg", price: 2.50 }, + { title: "Softijs", imageSrc: "media/softijs.jpg", price: 2.50 }, + { title: "Sundea ijs", imageSrc: "media/sundea.jpg", price: 2.50 }, ]; } else if (category === 'Deals') { items = [ @@ -128,7 +130,3 @@ function getDescription(title) { return ""; } -// Functie om het modaal venster te sluiten -function closeModal() { - document.getElementById('modal').style.display = 'none'; -} diff --git a/website/style.css b/website/style.css index 6544c01..46bd676 100644 --- a/website/style.css +++ b/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; +} \ No newline at end of file diff --git a/website/welcome.html b/website/welcome.html index f42d180..8e4a925 100644 --- a/website/welcome.html +++ b/website/welcome.html @@ -3,7 +3,7 @@ - De Welkompagina van de Mees + De welkompagina van de Mees @@ -21,7 +21,9 @@