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-19 13:29:30 +01:00
parent 00f9776bcf 8e99818cec
commit ca1578867f
5 changed files with 17 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
website/Cart/cart.css
View File

@@ -1,93 +0,0 @@
/* Winkelmandje sectie */
.cart {
width: 15%; /* Make the cart a bit smaller */
padding: 20px;
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: 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;
padding: 10px 0;
border-bottom: 1px solid #ff9d3b;
}
.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;
}
.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;
}

66
website/Cart/cart.js
View File

@@ -1,66 +0,0 @@
// Array to hold items added to the shopping cart
const cart = JSON.parse(localStorage.getItem('cart')) || [];
let cartCount = cart.length; // Initialize cart count
// Function to add an item to the shopping cart
function addToCart(item) {
cart.push(item); // Add item to the cart array
localStorage.setItem('cart', JSON.stringify(cart));
updateCart();
cartCount++; // Increment cart count
updateCartCountDisplay(); // Update the cart count display
closeModal();
}
// Function to update the shopping cart display
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';
}
}
// Function to remove an item from the shopping cart
function removeFromCart(index) {
cart.splice(index, 1);
localStorage.setItem('cart', JSON.stringify(cart));
updateCart();
cartCount--; // Decrement cart count
updateCartCountDisplay(); // Update the cart count display
}
// Function to update the cart count display
function updateCartCountDisplay() {
const cartCountElement = document.getElementById("cart-count"); // Get the element to display the count
if (cartCountElement) { // Check if the element exists
cartCountElement.textContent = cartCount; // Update the text content with the cart count
}
}
// Initial calls
updateCart();
updateCartCountDisplay(); // Initialize the cart count on page load
// Function to close the modal window
function closeModal() {
document.getElementById('modal').style.display = 'none';
}

12
website/betalen.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Betaalpagina Mees</title>
<link rel="icon" href="media/favicon.ico" type="image/x-icon">
</head>
<body>
<h1></h1>
</body>
</html>

4
website/index.html
View File

@@ -53,7 +53,9 @@
<!-- Winkelmandje items worden hier dynamisch toegevoegd -->
</ul>
<p>Totaal: €<span id="total-price">0.00</span></p>
<button id="order-button">Bestellen</button>
<a href="betalen.html">
<button id="order-button">Bestellen</button>
</a>
</div>
<!-- Winkelwagen icoon -->

3
website/style.css
View File

@@ -9,7 +9,7 @@ body {
/* Top bar menu */
.menu-bar {
width: 75%;
width: 75%; /* Use 75% of the screen width on the first page */
background-color: #ffffff;
padding: 10px 0;
@@ -26,6 +26,7 @@ body {
}
.menu-bar.top {
width: 100%; /* Use 100% of the screen width when at the top */
position: fixed; /* Fix the top bar to the top */
top: 0;
left: 0;