// 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'