Untitled
unknown
plain_text
24 days ago
2.1 kB
3
Indexable
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile Accessories Shop</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Mobile Accessories Shop</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#shop">Shop</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#cart">Cart (<span id="cart-count">0</span>)</a></li> </ul> </nav> </header><section id="shop"> <h2>Our Products</h2> <div class="product" data-id="1" data-name="Wireless Earbuds" data-price="29.99"> <h3>Wireless Earbuds</h3> <p>$29.99</p> <button onclick="addToCart(1, 'Wireless Earbuds', 29.99)">Add to Cart</button> </div> <div class="product" data-id="2" data-name="Phone Case" data-price="14.99"> <h3>Phone Case</h3> <p>$14.99</p> <button onclick="addToCart(2, 'Phone Case', 14.99)">Add to Cart</button> </div> </section> <section id="cart"> <h2>Shopping Cart</h2> <ul id="cart-items"></ul> <p>Total: $<span id="cart-total">0.00</span></p> </section> <script> let cart = []; function addToCart(id, name, price) { cart.push({ id, name, price }); updateCart(); } function updateCart() { let cartList = document.getElementById("cart-items"); let cartTotal = document.getElementById("cart-total"); let cartCount = document.getElementById("cart-count"); cartList.innerHTML = ""; let total = 0; cart.forEach(item => { let li = document.createElement("li"); li.textContent = `${item.name} - $${item.price.toFixed(2)}`; cartList.appendChild(li); total += item.price; }); cartTotal.textContent = total.toFixed(2); cartCount.textContent = cart.length; } </script> </body> </html>
Editor is loading...
Leave a Comment