Shopping Application
/* Your CSS styling here */
const productsDiv = document.getElementById('products');
const cartDiv = document.getElementById('cart');
const productsData = [
{ id: 1, name: 'Product 1', price: 10 },
{ id: 2, name: 'Product 2', price: 15 },
{ id: 3, name: 'Product 3', price: 20 }
];
function displayProducts() {
productsDiv.innerHTML = '';
for (const product of productsData) {
const productDiv = document.createElement('div');
productDiv.className = 'product';
productDiv.innerHTML = `
${product.name}
Price: $${product.price}
`;
productsDiv.appendChild(productDiv);
}
}
function addToCart(id, name, price) {
const cartItem = document.createElement('div');
cartItem.className = 'cart-item';
cartItem.innerHTML = `
${name} - $${price}
`;
cartDiv.appendChild(cartItem);
}
function removeFromCart(button) {
const cartItem = button.parentElement;
cartDiv.removeChild(cartItem);
}
displayProducts();
Comments
Post a Comment