Solución ejercicio 8

ejercicio8/ejercicio8.js

@@ -1 +1,72 @@
-// Agregar aquí el código javascript
+const productos = [
+    { nombre: "Teclado", precio: 8500 },
+    { nombre: "Mouse", precio: 4200 },
+    { nombre: "Monitor", precio: 62000 },
+    { nombre: "Auriculares", precio: 11000 },
+    { nombre: "Webcam", precio: 15500 }
+];
+
+// El carrito es un array de objetos { nombre, precio, cantidad }, que
+// inicializamos vacío fuera de las funciones (para que sea global):
+const carrito = [];
+
+const listaProductos = document.querySelector("#productos");
+
+function actualizarCarrito() {
+    const totalParrafo = document.querySelector("#total");
+    const listaCarrito = document.querySelector("#carrito");
+    listaCarrito.innerHTML = "";
+
+    // Calculamos el total mientras construimos la lista.
+    let total = 0;
+
+    for (const item of carrito) {
+        const subtotal = item.precio * item.cantidad;
+        total += subtotal;
+
+        const li = document.createElement("li");
+        li.textContent = `${item.nombre} x${item.cantidad} — $${subtotal.toLocaleString()}`;
+        listaCarrito.appendChild(li);
+    }
+
+    totalParrafo.textContent = `Total: $${total.toLocaleString()}`;
+}
+
+function agregarAlCarrito(producto) {
+    // Buscamos si el producto ya está en el carrito.
+    const itemExistente = carrito.find(item => item.nombre === producto.nombre);
+
+    if (itemExistente) {
+        // Si ya existe, solo incrementamos la cantidad.
+        itemExistente.cantidad++;
+    } else {
+        // Si no existe, lo agregamos manualmente con cantidad 1,
+        // copiando las propiedades una por una.
+        carrito.push({
+            nombre: producto.nombre,
+            precio: producto.precio,
+            cantidad: 1
+        });
+    }
+
+    actualizarCarrito();
+}
+
+// Construimos la lista de productos con un botón por cada uno.
+for (const producto of productos) {
+  const listaProductos = document.querySelector("#productos");
+  const card = document.createElement("div");
+  card.className = "product-card";
+  card.innerHTML = `
+    <div>
+      <p class="product-name">${producto.nombre}</p>
+      <p class="product-price">$${producto.precio.toLocaleString()}</p>
+    </div>
+    <button class="btn-add">+ Agregar</button>
+  `;
+  card.querySelector(".btn-add").addEventListener("click", () => agregarAlCarrito(producto));
+  listaProductos.appendChild(card);
+}
+
+actualizarCarrito();
+