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

Remove cart CSS and JavaScript files to streamline the project

Browse Source
This commit is contained in:
vista-man
2025-02-19 13:22:56 +01:00
parent d1d4813019
commit 8e99818cec
2 changed files with 0 additions and 159 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';
}