Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My E-commerce App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Welcome to My Shop</h1>

    <div id="products">
        <!-- Products will be listed here dynamically -->
    </div>

    <div id="cart">
        <h2>Shopping Cart</h2>
        <ul id="cart-items">
            <!-- Cart items will appear here -->
        </ul>
        <button id="checkout-btn">Checkout</button>
    </div>

    <script src="script.js"></script>
</body>
</html>
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}

h1 {
    text-align: center;
}

#products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.product {
    background-color: white;
    border: 1px solid #ddd;
    padding: 10px;
    width: 200px;
    margin: 10px;
    text-align: center;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#cart {
    margin-top: 50px;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
}

#cart-items {
    list-style-type: none;
    padding: 0;
}
const products = [
    { id: 1, name: "Product 1", price: 20 },
    { id: 2, name: "Product 2", price: 30 },
    { id: 3, name: "Product 3", price: 40 },
    { id: 4, name: "Product 4", price: 50 }
];

let cart = [];

// Display products
const productsDiv = document.getElementById('products');
products.forEach(product => {
    const productDiv = document.createElement('div');
    productDiv.classList.add('product');
    productDiv.innerHTML = `
        <h3>${product.name}</h3>
        <p>Price: $${product.price}</p>
        <button onclick="addToCart(${product.id})">Add to Cart</button>
    `;
    productsDiv.appendChild(productDiv);
});

// Add to cart functionality
function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    cart.push(product);
    updateCart();
}

// Update cart display
function updateCart() {
    const cartItems = document.getElementById('cart-items');
    cartItems.innerHTML = ''; // Clear previous items

    cart.forEach(item => {
        const cartItem = document.createElement('li');
        cartItem.innerHTML = `${item.name} - $${item.price}`;
        cartItems.appendChild(cartItem);
    });
}

// Checkout functionality
document.getElementById('checkout-btn').addEventListener('click', () => {
    if (cart.length === 0) {
        alert("Your cart is empty!");
    } else {
        alert("Proceeding to checkout...");
        // Further checkout steps could be implemented here
    }
});
Editor is loading...