68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
// Agregar aquí el código javascript
|
|
|
|
const products = [
|
|
{ name: "Teclado", price: 8500 },
|
|
{ name: "Mouse", price: 4200 },
|
|
{ name: "Monitor", price: 62000 },
|
|
{ name: "Auriculares", price: 11000 },
|
|
{ name: "Webcam", price: 15500 }
|
|
];
|
|
|
|
const productList = document.getElementById('productList');
|
|
const checkout = document.getElementById('checkout');
|
|
|
|
products.forEach(product => {
|
|
const productDiv = document.createElement('div');
|
|
productDiv.textContent = `${product.name} - $${product.price} `;
|
|
const buyButton = document.createElement('button');
|
|
buyButton.textContent = 'Comprar';
|
|
productDiv.appendChild(buyButton);
|
|
productList.appendChild(productDiv);
|
|
});
|
|
|
|
const cart = new Map();
|
|
|
|
const renderCart = () => {
|
|
checkout.innerHTML = '';
|
|
|
|
if (cart.size === 0) {
|
|
checkout.innerHTML = '<p>Carrito vacío</p>';
|
|
return;
|
|
}
|
|
|
|
let totalPrice = 0;
|
|
|
|
cart.forEach((quantity, product) => {
|
|
const lineTotal = product.price * quantity;
|
|
totalPrice += lineTotal;
|
|
|
|
const itemRow = document.createElement('div');
|
|
itemRow.innerHTML = `
|
|
<div>${product.name} -------- x${quantity}</div>
|
|
<div>$${lineTotal.toLocaleString()}</div>
|
|
`;
|
|
checkout.appendChild(itemRow);
|
|
});
|
|
|
|
const totalRow = document.createElement('div');
|
|
totalRow.innerHTML = `<strong>Total: ------------- $${totalPrice.toLocaleString()}</strong>`;
|
|
checkout.appendChild(totalRow);
|
|
};
|
|
|
|
productList.addEventListener('click', (event) => {
|
|
if (event.target.tagName === 'BUTTON') {
|
|
const productDiv = event.target.parentElement;
|
|
const productName = productDiv.textContent.split(' - ')[0];
|
|
const product = products.find(p => p.name === productName);
|
|
|
|
if (!product) {
|
|
return;
|
|
}
|
|
|
|
const currentQty = cart.get(product) || 0;
|
|
cart.set(product, currentQty + 1);
|
|
renderCart();
|
|
}
|
|
});
|
|
|
|
renderCart(); |