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

Merge branch 'main' of https://github.com/Alvin-Zilverstand/Schoolkantine

Browse Source
This commit is contained in:
cowboykipnugget
2025-02-18 09:25:45 +01:00
parent a947b035d3 ac41af07fd
commit 4880351760
4 changed files with 159 additions and 44 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 */
.cart {
width: 15%;
background-color: #fff; /* Change background color to white */
width: 15%; /* Make the cart a bit smaller */
padding: 20px;
height: 100vh;
overflow-y: auto;
order: 3; /* Ensure the cart is on the right */
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: 0; /* Align the cart to the top */
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;
@@ -50,3 +68,26 @@
#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;
}

14
website/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,9 +14,8 @@
<body>
<!-- Linkerkant menu -->
<div class="menu-list">
<h2>Menu</h2>
<!-- Top bar menu -->
<div class="menu-bar">
<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('Warme-Dranken')">Warme Dranken</div>
@@ -40,6 +40,7 @@
<img id="modal-image" src="" alt="">
<p id="modal-description"></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>
</div>
</div>
@@ -61,12 +62,13 @@
</div>
<footer>
<p>&copy; 2025 Vista </p>
<center>
<p>&copy; 2025 Vista </p>
</center>
</footer>
</div>
<script src="script.js"></script>
<script src="Cart/cart.js"></script>
</body>
</html>
</html>

70
website/script.js
View File

@@ -5,7 +5,6 @@ function showCategory(category) {
let items = [];
// Afhankelijk van de gekozen categorie, voeg je de juiste producten toe
if (category === 'Broodjes') {
items = [
@@ -107,10 +106,12 @@ function showItemDetails(item) {
document.getElementById("modal-description").innerText = description;
document.getElementById("modal-price").innerText = `Prijs: €${price.toFixed(2)}`;
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.querySelector('.menu-bar').classList.add('dark'); // Add dark class to menu-bar
}
// Functie om de beschrijving op te halen afhankelijk van de titel
@@ -136,3 +137,68 @@ function getDescription(title) {
}
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();

66
website/style.css
View File

@@ -17,12 +17,15 @@ body {
}
.menu-item {
background-color: #fff;
padding: 10px 20px;
margin: 5px;
background-color: #ff9d3b;
padding: 20px;
margin: 10px 0;
border-radius: 8px;
cursor: pointer;
font-size: 1.5em;
font-size: 1.2em;
transition: all 0.3s ease;
}
@@ -33,15 +36,16 @@ body {
/* Productweergave in een grid */
.product-display {
width: 55%;
width: calc(100% - 20%); /* Adjust width to leave space for the cart */
display: flex;
flex-wrap: wrap;
padding: 50px;
justify-content: space-between 40px;
display: inline-flex;
padding: 20px;
justify-content: space-around;
margin-top: 60px; /* Add margin to ensure it starts below the top bar */
}
.product-box {
width: 200px;
width: 200px; /* Keep the width fixed */
margin: 10px;
border-radius: 8px;
overflow: hidden;
@@ -96,32 +100,14 @@ body {
}
.close {
color: red;
position: absolute;
top: 80px;
right: 450px;
font-size: 40px;
top: 10px;
right: 20px;
font-size: 30px;
font-weight: bold;
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 {
background-color: #4CAF50;
color: white;
@@ -129,16 +115,17 @@ body {
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
}
#add-to-cart:hover {
background-color: #45a049;
}
/* Winkelwagen-icoon */
.cart-icon {
/* Winkelwagen-icoon */
.cart-icon {
position: fixed;
top: 20px;
top: 80px; /* Move the cart icon down */
right: 20px;
background-color: #ff6600;
color: white;
@@ -189,4 +176,23 @@ body {
.product button:hover {
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 */
}
}