alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-06 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor shopping cart functionality and styles; add new cart.js and cart.css files

Browse Source
This commit is contained in:
vista-man
2025-02-12 13:38:13 +01:00
parent 9752c92d1c
commit e0077b4e1c
7 changed files with 100 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
website/cart.css Normal file
View File

@@ -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;
}

45
website/cart.js Normal file
View File

@@ -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 = `
<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';
}
}
// 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();

2
website/index.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Het hoofdmenu van de Mees</title> <title>Het hoofdmenu van de Mees</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="cart.css">
<link rel="icon" href="media/favicon.ico" type="image/x-icon"> <link rel="icon" href="media/favicon.ico" type="image/x-icon">
</head> </head>
<body> <body>
@@ -51,4 +52,5 @@
</body> </body>
<script src="script.js"></script> <script src="script.js"></script>
<script src="cart.js"></script>
</html> </html>

BIN
website/media/spa.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
website/media/spa.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

48
website/script.js
View File

@@ -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 // Functie om de details van een geselecteerd item weer te geven
function showItemDetails(item) { function showItemDetails(item) {
var title = ""; var title = "";
@@ -16,7 +13,7 @@ function showItemDetails(item) {
price = 3.50; price = 3.50;
} else if (item === 'drinks') { } else if (item === 'drinks') {
title = "Spa Water"; title = "Spa Water";
imageSrc = "media/spa.jpg"; imageSrc = "media/spa.webp";
description = "Koude verfrissende water."; description = "Koude verfrissende water.";
price = 1.00; price = 1.00;
} else if (item === 'Snacks') { } else if (item === 'Snacks') {
@@ -64,46 +61,6 @@ function showItemDetails(item) {
document.getElementById("modal").style.display = "block"; 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 = `
<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';
}
}
// Functie om een item uit het winkelwagentje te verwijderen
function removeFromCart(index) {
cart.splice(index, 1);
updateCart();
}
// Functie om het modaal venster te sluiten // Functie om het modaal venster te sluiten
function closeModal() { function closeModal() {
document.getElementById("modal").style.display = "none"; document.getElementById("modal").style.display = "none";
@@ -115,6 +72,3 @@ window.onclick = function(event) {
closeModal(); closeModal();
} }
} }
// Initial call to updateCart to ensure the button is hidden on page load
updateCart();

53
website/style.css
View File

@@ -73,59 +73,6 @@ body {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 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) */ /* Modaal venster (pop-up) */
.modal { .modal {
display: none; display: none;