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