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

Enhance cart functionality and layout; add item quantity input and update styles for better responsiveness

Browse Source
This commit is contained in:
vista-man
2025-02-18 09:22:29 +01:00
parent 1f418f9c85
commit ac41af07fd
4 changed files with 175 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
website/Cart/cart.css
View File

@@ -1,18 +1,36 @@
/* Winkelmandje sectie */ /* Winkelmandje sectie */
.cart { .cart {
width: 15%; width: 15%; /* Make the cart a bit smaller */
background-color: #fff; /* Change background color to white */
padding: 20px; padding: 20px;
height: 100vh; background-color: #fff;
overflow-y: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
order: 3; /* Ensure the cart is on the right */ margin-top: 80px; /* Increase margin to ensure it starts below the categories bar */
position: fixed; /* Fix the cart to the right side */ position: fixed; /* Fix the cart to the right side */
right: 0; /* Align the cart to the right */ right: 0; /* Align the cart to the right */
top: 0; /* Align the cart to the top */ top: 60px; /* Ensure it starts below the categories bar */
display: flex; display: flex;
flex-direction: column; /* Ensure the content is arranged in a column */ 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 { .cart-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -50,3 +68,26 @@
#order-button:hover { #order-button:hover {
background-color: #45a049; 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;
}

12
website/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="nl"> <html lang="nl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,9 +14,8 @@
<body> <body>
<!-- Linkerkant menu --> <!-- Top bar menu -->
<div class="menu-list"> <div class="menu-bar">
<h2>Menu</h2>
<div class="menu-item" onclick="showCategory('Broodjes')">Broodjes</div> <div class="menu-item" onclick="showCategory('Broodjes')">Broodjes</div>
<div class="menu-item" onclick="showCategory('Koude-Dranken')">Koude Dranken</div> <div class="menu-item" onclick="showCategory('Koude-Dranken')">Koude Dranken</div>
<div class="menu-item" onclick="showCategory('Warme-Dranken')">Warme Dranken</div> <div class="menu-item" onclick="showCategory('Warme-Dranken')">Warme Dranken</div>
@@ -40,6 +40,7 @@
<img id="modal-image" src="" alt=""> <img id="modal-image" src="" alt="">
<p id="modal-description"></p> <p id="modal-description"></p>
<p id="modal-price"></p> <p id="modal-price"></p>
<input type="number" id="item-quantity" value="1" min="1" style="width: 50px; text-align: center;">
<button id="add-to-cart">Toevoegen aan winkelmandje</button> <button id="add-to-cart">Toevoegen aan winkelmandje</button>
</div> </div>
</div> </div>
@@ -61,12 +62,13 @@
</div> </div>
<footer> <footer>
<center>
<p>&copy; 2025 Vista </p> <p>&copy; 2025 Vista </p>
</center>
</footer> </footer>
</div>
<script src="script.js"></script> <script src="script.js"></script>
<script src="Cart/cart.js"></script> <script src="Cart/cart.js"></script>
</body> </body>
</html>
</html>

70
website/script.js
View File

@@ -5,7 +5,6 @@ function showCategory(category) {
let items = []; let items = [];
// Afhankelijk van de gekozen categorie, voeg je de juiste producten toe // Afhankelijk van de gekozen categorie, voeg je de juiste producten toe
if (category === 'Broodjes') { if (category === 'Broodjes') {
items = [ items = [
@@ -107,10 +106,12 @@ function showItemDetails(item) {
document.getElementById("modal-description").innerText = description; document.getElementById("modal-description").innerText = description;
document.getElementById("modal-price").innerText = `Prijs: €${price.toFixed(2)}`; document.getElementById("modal-price").innerText = `Prijs: €${price.toFixed(2)}`;
document.getElementById("add-to-cart").onclick = function() { document.getElementById("add-to-cart").onclick = function() {
addToCart({ title, price }); const quantity = parseInt(document.getElementById("item-quantity").value);
addToCart({ title, price, quantity });
}; };
document.getElementById('modal').style.display = 'block'; document.getElementById('modal').style.display = 'block';
document.querySelector('.menu-bar').classList.add('dark'); // Add dark class to menu-bar
} }
// Functie om de beschrijving op te halen afhankelijk van de titel // Functie om de beschrijving op te halen afhankelijk van de titel
@@ -136,3 +137,68 @@ function getDescription(title) {
} }
return ""; return "";
} }
// Functie om een item aan het winkelwagentje toe te voegen
function addToCart(item) {
const cart = JSON.parse(localStorage.getItem('cart')) || [];
for (let i = 0; i < item.quantity; i++) {
cart.push(item);
}
localStorage.setItem('cart', JSON.stringify(cart));
updateCart();
}
// Functie om het winkelwagentje bij te werken
function updateCart() {
const cart = JSON.parse(localStorage.getItem('cart')) || [];
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';
}
// Update the cart count in the cart icon
document.getElementById('cart-count').innerText = cart.length;
}
// Functie om een item uit het winkelwagentje te verwijderen
function removeFromCart(index) {
const cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.splice(index, 1);
localStorage.setItem('cart', JSON.stringify(cart));
updateCart();
}
// Functie om het modaal venster te sluiten
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.querySelector('.menu-bar').classList.remove('dark'); // Remove dark class from menu-bar
}
// Zorg ervoor dat het modaal venster sluit wanneer er buiten het venster wordt geklikt
window.onclick = function(event) {
if (event.target == document.getElementById('modal')) {
closeModal();
}
}
// Initial call to updateCart to ensure the button is hidden on page load
updateCart();

89
website/style.css
View File

@@ -3,26 +3,36 @@ body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: space-between; flex-direction: column; /* Change to column to accommodate the top bar */
background-color: #f2c14e; background-color: #f2c14e;
} }
/* Linkerkant menu */ /* Top bar menu */
.menu-list { .menu-bar {
width: 25%; width: 100%;
background-color: #f2c14e; background-color: #f2c14e;
padding: 20px; padding: 10px 0;
height: 100vh; display: flex;
overflow-y: auto; justify-content: space-around;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: fixed; /* Fix the top bar to the top */
top: 0;
z-index: 1000; /* Ensure it is above other elements */
transition: background-color 0.3s ease; /* Add transition for background color */
}
.menu-bar.dark {
background-color: #d1a73e; /* Darker background color when modal is open */
} }
.menu-item { .menu-item {
background-color: #fff; background-color: #fff;
padding: 20px; padding: 10px 20px;
margin: 10px 0; margin: 5px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 1.5em; font-size: 1.2em;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@@ -33,15 +43,16 @@ body {
/* Productweergave in een grid */ /* Productweergave in een grid */
.product-display { .product-display {
width: 55%; width: calc(100% - 20%); /* Adjust width to leave space for the cart */
display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 50px; padding: 20px;
justify-content: space-between 40px; justify-content: space-around;
display: inline-flex; margin-top: 60px; /* Add margin to ensure it starts below the top bar */
} }
.product-box { .product-box {
width: 200px; width: 200px; /* Keep the width fixed */
margin: 10px; margin: 10px;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@@ -49,8 +60,6 @@ body {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.product-box:hover { .product-box:hover {
@@ -95,32 +104,14 @@ body {
} }
.close { .close {
color: red;
position: absolute; position: absolute;
top: 80px; top: 10px;
right: 450px; right: 20px;
font-size: 40px; font-size: 30px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
} }
/* Winkelmandje */
.cart {
width: 25%;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.cart ul {
list-style-type: none;
padding: 0;
}
.cart li {
margin-bottom: 10px;
}
#add-to-cart { #add-to-cart {
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
@@ -128,6 +119,7 @@ body {
padding: 10px 20px; padding: 10px 20px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
margin-top: 20px;
} }
#add-to-cart:hover { #add-to-cart:hover {
@@ -137,7 +129,7 @@ body {
/* Winkelwagen-icoon */ /* Winkelwagen-icoon */
.cart-icon { .cart-icon {
position: fixed; position: fixed;
top: 20px; top: 80px; /* Move the cart icon down */
right: 20px; right: 20px;
background-color: #ff6600; background-color: #ff6600;
color: white; color: white;
@@ -189,3 +181,22 @@ body {
.product button:hover { .product button:hover {
background-color: #e65c00; background-color: #e65c00;
} }
/* Responsive design */
@media (max-width: 768px) {
.menu-bar {
flex-wrap: wrap; /* Allow wrapping of menu items */
}
.product-display {
width: 100%; /* Use full width for product display */
margin-top: 120px; /* Increase margin to accommodate wrapped menu bar */
}
.cart {
width: 100%; /* Use full width for cart */
top: auto; /* Remove fixed position */
bottom: 0; /* Position at the bottom */
height: auto; /* Adjust height */
}
}