diff --git a/ejercicio8/ejercicio8.js b/ejercicio8/ejercicio8.js index 6ce9e92..81bfd2f 100644 --- 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 = `
  • ${producto}
  • `; + 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' \ No newline at end of file diff --git a/ejercicio8/index.html b/ejercicio8/index.html index ec3d268..268952c 100644 --- a/ejercicio8/index.html +++ b/ejercicio8/index.html @@ -8,7 +8,7 @@

    Ejercicio 8

    - +