avances en el ajercicio 8 (creacion de lista dinamica)

2026-06-01 19:13:03 -03:00
parent 1f6bb5fa62
commit 35ebe21767
2 changed files with 36 additions and 1 deletions
--- a/ejercicio8/ejercicio8.js
+++ b/ejercicio8/ejercicio8.js
@@ -1 +1,36 @@
 // Agregar aquí el código javascript
+
+// Construir dinámicamente una lista de productos en la página, donde cada ítem
+// tenga un botón "Agregar al carrito". Al hacer clic, el producto se agrega a
+// una sección "Carrito" visible en la página, junto con su precio. Al pie del
+// carrito, mostrar el total actualizado.
+
+// Si el mismo producto se agrega más de una vez, no duplicarlo: incrementar su
+// cantidad y actualizar el total.
+
+
+// Lista de prodcutos
+let ArrayProductos = ['arroz', 'aceite', 'fideos', 'azucar', 'avena'];
+
+// asignamos las variables NO dinamicas y anexamos al body
+let body = document.querySelector('body');
+let listaProductos = document.createElement('ul');
+body.appendChild(listaProductos);
+
+// Creamos la lista dinamica recorriendo el array con los productos
+for (producto of ArrayProductos){
+    let liProducto = document.createElement('li');
+    liProducto.innerHTML = `<li> ${producto} <button type="button" id='boton-carrito'>+</button></li>`;
+    listaProductos.appendChild(liProducto);
+}
+// creamos un listener en la 'ul' que solo muestra console.log si se toca el boton (esta logica nos servira mas adelante)
+listaProductos.addEventListener('click', (e) => {
+    if (e.target.id === 'boton-carrito'){
+        console.log('el boton + fue clickeado')
+    }
+})
+
+// obervaciones para el siguiente commit: no fue la mejor decicion hacer un array en simple 
+// en arrayProductos, ya que cada producto debe tener un precio asociado. 
+// se debe modificar arrayProductos y hacerla 
+// un array de objetos con las propiedades 'nombre' y 'precio'
--- a/ejercicio8/index.html
+++ b/ejercicio8/index.html
@@ -8,7 +8,7 @@
    </head>
    <body>
        <h1>Ejercicio 8</h1>
-
+<button></button>
        <script src="ejercicio8.js"></script>
    </body>
 </html>