<!DOCTYPE html>
<html>
<head>
    <title>Online Clothing Store</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <h1>Fashion Store</h1>
</header>

<h2>Shop Our Clothes</h2>

<div class="products">
    <div class="card">
        <img src="https://i.imgur.com/1Q9Z1Zm.png">
        <h3>T-Shirt</h3>
        <p>$15</p>
        <button onclick="addToCart('T-Shirt',15)">Buy</button>
    </div>

    <div class="card">
        <img src="https://i.imgur.com/2yaf2wb.png">
        <h3>Jeans</h3>
        <p>$40</p>
        <button onclick="addToCart('Jeans',40)">Buy</button>
    </div>

    <div class="card">
        <img src="https://i.imgur.com/9X3VJQp.png">
        <h3>Hoodie</h3>
        <p>$30</p>
        <button onclick="addToCart('Hoodie',30)">Buy</button>
    </div>
</div>

<h2>Cart</h2>
<div id="cart"></div>

<h2>Checkout</h2>
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Address">
<button onclick="checkout()">Place Order</button>

<script src="script.js"></script>
</body>
</html>
body {
    font-family: Arial;
    background-color: #f4f4f4;
    text-align: center;
}

header {
    background-color: black;
    color: white;
    padding: 20px;
}

.products {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}

.card {
    background-color: white;
    padding: 15px;
    width: 200px;
    border-radius: 5px;
}

img {
    width: 100%;
}

button {
    background-color: green;
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    margin-top: 5px;
}

button:hover {
    background-color: darkgreen;
}

input {
    margin: 5px;
    padding: 8px;
    width: 200px;
}
var cart = [];
var cartDiv = document.getElementById("cart");

function addToCart(name, price) {
    cart.push({name:name, price:price});
    displayCart();
}

function displayCart() {
    cartDiv.innerHTML = "";
    for (var i = 0; i < cart.length; i++) {
        cartDiv.innerHTML += cart[i].name + " - $" + cart[i].price + "<br>";
    }
}

function checkout() {
    alert("Order placed! Thank you for shopping.");
    cart = [];
    displayCart();
}