Untitled
unknown
plain_text
2 months ago
2.9 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>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...
Leave a Comment