l105/H15/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webshop</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="webshop">
<div class="product" data-id="1" data-name="Bruin Rond" data-price="3.19">
<img src="https://via.placeholder.com/150" alt="Bruin Rond">
<p>Bruin Rond</p>
<p>€ 3.19</p>
<button class="add-to-cart">Toevoegen aan winkelmandje</button>
</div>
<div class="product" data-id="2" data-name="Bruin Knip" data-price="3.19">
<img src="https://via.placeholder.com/150" alt="Bruin Knip">
<p>Bruin Knip</p>
<p>€ 3.19</p>
<button class="add-to-cart">Toevoegen aan winkelmandje</button>
</div>
<div class="product" data-id="3" data-name="Vloerbruin Tijger" data-price="3.50">
<img src="https://via.placeholder.com/150" alt="Vloerbruin Tijger">
<p>Vloerbruin Tijger</p>
<p>€ 3.50</p>
<button class="add-to-cart">Toevoegen aan winkelmandje</button>
</div>
</div>
<div class="cart">
<h2>Winkelmandje</h2>
<ul id="cart-items"></ul>
<button id="checkout">Afrekenen</button>
</div>
<script src="script.js"></script>
</body>
</html>
Resultaat
Made by Thijs Aarnoudse