Scribd
Upload
6 views2 pages

Text

This document is an HTML template for a clothing store website. It includes a header, a list of clothing items with prices, and a shopping cart feature that allows users to add items and see the total cost. The document also contains styling and JavaScript functionality for interactivity.

Uploaded by

6kn28rb78b
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views2 pages

Text

This document is an HTML template for a clothing store website. It includes a header, a list of clothing items with prices, and a shopping cart feature that allows users to add items and see the total cost. The document also contains styling and JavaScript functionality for interactivity.

Uploaded by

6kn28rb78b
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clothing Store</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.header {
text-align: center;
color: #333;
}
.clothing-list {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.item {
background-color: white;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
width: 200px;
text-align: center;
}
.item button {
background-color: #28a745;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.item button:hover {
background-color: #218838;
}
#cart {
margin-top: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="header">
<h1>Welcome to Our Clothing Store</h1>
</div>

<div class="clothing-list">
<div class="item">
<h3>T-Shirt</h3>
<p>$19.99</p>
<button onclick="addToCart('T-Shirt', 19.99)">Add to Cart</button>
</div>
<div class="item">
<h3>Jeans</h3>
<p>$39.99</p>
<button onclick="addToCart('Jeans', 39.99)">Add to Cart</button>
</div>
<div class="item">
<h3>Jacket</h3>
<p>$59.99</p>
<button onclick="addToCart('Jacket', 59.99)">Add to Cart</button>
</div>
</div>

<div id="cart">
<h2>Shopping Cart</h2>
<ul id="cart-items"></ul>
<p>Total: $<span id="cart-total">0.00</span></p>
</div>

<script>
let cart = [];
let total = 0;

function addToCart(itemName, price) {


// Add item to cart array
cart.push({ name: itemName, price: price });
total += price;

// Update the cart display


const cartList = document.getElementById('cart-items');
const newItem = document.createElement('li');
newItem.textContent = `${itemName} - $${price.toFixed(2)}`;
cartList.appendChild(newItem);

// Update the total price


document.getElementById('cart-total').textContent = total.toFixed(2);
}
</script>
</body>
</html>

You might also like