feat: implement product listing and shopping cart functionality

ejercicio8/ejercicio8.js

@@ -1 +1,68 @@
 // 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();