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

k

Browse Source
This commit is contained in:
Dylanomz
2025-02-13 12:20:21 +01:00
parent 05d15fab69
commit 462cd5f206
4 changed files with 104 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
website/cart.js
View File

@@ -1,6 +1,10 @@
// Array to hold items added to the shopping cart // Array to hold items added to the shopping cart
const cart = []; const cart = [];
// Functie om een item aan het winkelwagentje toe te voegen // Functie om een item aan het winkelwagentje toe te voegen
function addToCart(item) { function addToCart(item) {
cart.unshift(item); // Add item to the beginning of the cart array cart.unshift(item); // Add item to the beginning of the cart array
@@ -8,6 +12,8 @@ function addToCart(item) {
closeModal(); closeModal();
} }
// Functie om het winkelwagentje bij te werken // Functie om het winkelwagentje bij te werken
function updateCart() { function updateCart() {
const cartItemsContainer = document.getElementById("cart-items"); const cartItemsContainer = document.getElementById("cart-items");
@@ -35,6 +41,7 @@ function updateCart() {
} }
} }
// Functie om een item uit het winkelwagentje te verwijderen // Functie om een item uit het winkelwagentje te verwijderen
function removeFromCart(index) { function removeFromCart(index) {
cart.splice(index, 1); cart.splice(index, 1);
@@ -43,3 +50,15 @@ function removeFromCart(index) {
// Initial call to updateCart to ensure the button is hidden on page load // Initial call to updateCart to ensure the button is hidden on page load
updateCart(); updateCart();
// Functie om het modaal venster te sluiten
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
let cartCount = 0;
function addToCart() {
cartCount++;
document.querySelector('.cart-count').textContent = cartCount;
}

29
website/index.html
View File

@@ -61,3 +61,32 @@
<script src="cart.js"></script> <script src="cart.js"></script>
</body> </body>
</html> </html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Winkelwagen icoon -->
<div class="cart-icon">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count">0</span> <!-- Aantal producten -->
</div>
<!-- Producten -->
<div class="products">
<div class="product">
<h3>Product 1</h3>
<p>Prijs: €10</p>
<button onclick="addToCart()">Toevoegen</button>
</div>
<div class="product">
<h3>Product 2</h3>
<p>Prijs: €15</p>
<button onclick="addToCart()">Toevoegen</button>
</div>
<div class="product">
<h3>Product 3</h3>
<p>Prijs: €20</p>
<button onclick="addToCart()">Toevoegen</button>
</div>
</div>

4
website/script.js
View File

@@ -124,7 +124,3 @@ function getDescription(title) {
return ""; return "";
} }
// Functie om het modaal venster te sluiten
function closeModal() {
document.getElementById('modal').style.display = 'none';
}

56
website/style.css
View File

@@ -134,3 +134,59 @@ body {
#add-to-cart:hover { #add-to-cart:hover {
background-color: #45a049; background-color: #45a049;
} }
/* Winkelwagen-icoon */
.cart-icon {
position: fixed;
top: 20px;
right: 20px;
background-color: #ff6600;
color: white;
padding: 10px 15px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cart-icon:hover {
background-color: #e65c00;
}
.cart-count {
position: absolute;
top: -5px;
right: -5px;
background: red;
color: white;
font-size: 12px;
font-weight: bold;
padding: 3px 6px;
border-radius: 50%;
}
/* Productstijl */
.products {
display: flex;
gap: 20px;
margin: 50px;
}
.product {
border: 1px solid #ddd;
padding: 20px;
text-align: center;
}
.product button {
background-color: #ff6600;
color: white;
border: none;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}
.product button:hover {
background-color: #e65c00;
}