forked from marquez.juan/clase-10-ejercicios-de-repaso
36 lines
1.5 KiB
JavaScript
36 lines
1.5 KiB
JavaScript
// 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'
|