Scribd
Upload
8 views1 page

JavaScript Shopping Cart Functionality

The document contains a JavaScript code snippet for an online shopping cart system. It defines a list of products, functions to render products, add them to a cart, and display the cart's contents. Additionally, it includes event listeners for displaying a modal with cart items and a placeholder for checkout functionality.

Uploaded by

cy069234
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
8 views1 page

JavaScript Shopping Cart Functionality

The document contains a JavaScript code snippet for an online shopping cart system. It defines a list of products, functions to render products, add them to a cart, and display the cart's contents. Additionally, it includes event listeners for displaying a modal with cart items and a placeholder for checkout functionality.

Uploaded by

cy069234
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

const products = [

{ id: 1, name: 'Shirt', price: 20 },


{ id: 2, name: 'Pants', price: 30 },
{ id: 3, name: 'Shoes', price: 50 }
];

let cart = [];

function renderProducts() {
const container = [Link]('products');
[Link] = '';
[Link](product => {
const div = [Link]('div');
[Link] = 'product';
[Link] = `
<h3>${[Link]}</h3>
<p>$${[Link]}</p>
<button onclick="addToCart(${[Link]})">Add to Cart</button>
`;
[Link](div);
});
}

function addToCart(id) {
const product = [Link](p => [Link] === id);
[Link](product);
updateCartDisplay();
}

function updateCartDisplay() {
[Link]('cart').textContent = `Cart: ${[Link]} items`;
}

[Link]('cart').addEventListener('click', () => {
const modal = [Link]('cart-modal');
const items = [Link]('cart-items');
[Link] = [Link](item => `<li>${[Link]} -
$${[Link]}</li>`).join('');
[Link] = 'block';
});

[Link]('close-cart').addEventListener('click', () => {
[Link]('cart-modal').[Link] = 'none';
});

[Link]('checkout').addEventListener('click', () => {
alert('Checkout not implemented. Total: $' + [Link]((sum, item) => sum +
[Link], 0));
});

renderProducts();

You might also like