From 5513e42fc0bfb7aa21ae7fb71fcd1e48bc14873e Mon Sep 17 00:00:00 2001 From: Juanse Marquez Date: Mon, 1 Jun 2026 18:48:45 -0300 Subject: [PATCH] =?UTF-8?q?Soluci=C3=B3n=20ejercicio=208?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ejercicio8/ejercicio8.js | 73 ++++++++++++- ejercicio8/estilo.css | 215 ++++++++++++++++++++++++++++++++++++++- ejercicio8/index.html | 47 +++++++-- 3 files changed, 322 insertions(+), 13 deletions(-) diff --git a/ejercicio8/ejercicio8.js b/ejercicio8/ejercicio8.js index 6ce9e92..0eb7f9f 100644 --- a/ejercicio8/ejercicio8.js +++ b/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 = ` +
+

${producto.nombre}

+

$${producto.precio.toLocaleString()}

+
+ + `; + card.querySelector(".btn-add").addEventListener("click", () => agregarAlCarrito(producto)); + listaProductos.appendChild(card); +} + +actualizarCarrito(); + diff --git a/ejercicio8/estilo.css b/ejercicio8/estilo.css index 159b7f6..7c84039 100644 --- a/ejercicio8/estilo.css +++ b/ejercicio8/estilo.css @@ -1,2 +1,215 @@ -/* Agregar el código CSS necesario para el ejercicio */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +body { + font-family: system-ui, sans-serif; + background: #f5f4f0; + color: #1a1a1a; + min-height: 100vh; + padding: 2rem; +} + +h1 { + font-size: 1.1rem; + font-weight: 500; + color: #555; + margin-bottom: 1.5rem; +} + +.layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + max-width: 820px; +} + +.section-label { + font-size: 0.7rem; + font-weight: 500; + color: #888; + text-transform: uppercase; + letter-spacing: 0.06em; + margin-bottom: 0.75rem; +} + +/* ── Productos ── */ + +.product-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.product-card { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + background: #fff; + border: 0.5px solid #ddd; + border-radius: 8px; +} + +.product-name { + font-size: 0.875rem; + font-weight: 500; + color: #1a1a1a; +} + +.product-price { + font-size: 0.75rem; + color: #888; + margin-top: 2px; +} + +.btn-add { + display: flex; + align-items: center; + gap: 4px; + padding: 6px 12px; + font-size: 0.75rem; + font-weight: 500; + background: transparent; + border: 0.5px solid #ccc; + border-radius: 6px; + color: #1a1a1a; + cursor: pointer; + transition: background 0.15s; +} + +.btn-add:hover { background: #f0efeb; } + +/* ── Carrito ── */ + +.cart-panel { + background: #edecea; + border: 0.5px solid #ddd; + border-radius: 12px; + padding: 1rem 1.25rem; + display: flex; + flex-direction: column; + gap: 10px; +} + +.cart-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 5px; + background: #fde8e8; + color: #a32d2d; + border-radius: 9px; + font-size: 0.625rem; + font-weight: 500; + margin-left: 4px; +} + +.cart-empty { + font-size: 0.8rem; + color: #aaa; + text-align: center; + padding: 1.5rem 0; +} + +.cart-items { + display: flex; + flex-direction: column; + gap: 8px; +} + +.cart-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 10px; + background: #fff; + border: 0.5px solid #ddd; + border-radius: 8px; +} + +.cart-item-name { + font-size: 0.8rem; + font-weight: 500; + color: #1a1a1a; +} + +.cart-item-sub { + font-size: 0.7rem; + color: #888; + margin-top: 2px; +} + +.cart-item-right { + display: flex; + align-items: center; + gap: 10px; +} + +.cart-item-total { + font-size: 0.8rem; + font-weight: 500; + color: #1a1a1a; + min-width: 64px; + text-align: right; +} + +.qty-controls { + display: flex; + align-items: center; + gap: 4px; +} + +.qty-btn { + width: 22px; + height: 22px; + border: 0.5px solid #ccc; + border-radius: 4px; + background: transparent; + color: #1a1a1a; + cursor: pointer; + font-size: 0.875rem; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; +} + +.qty-btn:hover { background: #f0efeb; } + +.qty-val { + font-size: 0.8rem; + font-weight: 500; + min-width: 16px; + text-align: center; + color: #1a1a1a; +} + +.divider { + border: none; + border-top: 0.5px solid #ccc; +} + +.cart-total { + display: flex; + justify-content: space-between; + align-items: baseline; +} + +.cart-total-label { + font-size: 0.8rem; + color: #888; +} + +.cart-total-amount { + font-size: 1.25rem; + font-weight: 500; + color: #1a1a1a; +} diff --git a/ejercicio8/index.html b/ejercicio8/index.html index ec3d268..14dc028 100644 --- a/ejercicio8/index.html +++ b/ejercicio8/index.html @@ -1,14 +1,39 @@ - - - - - Ejercicio 8 - - - -

Ejercicio 8

+ + + + + Ejercicio 8 — Carrito de compras + + + + - - +

Ejercicio 8 — Carrito de compras

+ +
+
+

Productos

+
+
+ +
+
+

+ Carrito +

+
+
+

El carrito está vacío.

+
+
+
+ Total + $0 +
+
+
+ + +