Untitled

avatar
unknown
plain_text
a month 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