avances en el ajercicio 8 (creacion de lista dinamica)

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'