72 lines
1.5 KiB
JavaScript
72 lines
1.5 KiB
JavaScript
const productos = [
|
|
{ nombre: "Teclado", precio: 8500 },
|
|
{ nombre: "Mouse", precio: 4200 },
|
|
{ nombre: "Monitor", precio: 62000 },
|
|
{ nombre: "Auriculares", precio: 11000 },
|
|
{ nombre: "Webcam", precio: 15500 }
|
|
];
|
|
|
|
const contenedorProductos = document.querySelector("#productos");
|
|
const carritoLista = document.querySelector("#carrito");
|
|
const totalTexto = document.querySelector("#total");
|
|
|
|
const carrito = [];
|
|
|
|
function mostrarProductos() {
|
|
for (const producto of productos) {
|
|
const div = document.createElement("div");
|
|
|
|
div.innerHTML = `
|
|
<span>${producto.nombre} - $${producto.precio}</span>
|
|
<button>Agregar al carrito</button>
|
|
`;
|
|
|
|
const boton = div.querySelector("button");
|
|
|
|
boton.addEventListener("click", () => {
|
|
agregarAlCarrito(producto);
|
|
});
|
|
|
|
contenedorProductos.appendChild(div);
|
|
}
|
|
}
|
|
|
|
function agregarAlCarrito(producto) {
|
|
const existente = carrito.find(
|
|
item => item.nombre === producto.nombre
|
|
);
|
|
|
|
if (existente) {
|
|
existente.cantidad++;
|
|
} else {
|
|
carrito.push({
|
|
nombre: producto.nombre,
|
|
precio: producto.precio,
|
|
cantidad: 1
|
|
});
|
|
}
|
|
|
|
actualizarCarrito();
|
|
}
|
|
|
|
function actualizarCarrito() {
|
|
carritoLista.innerHTML = "";
|
|
|
|
let total = 0;
|
|
|
|
for (const item of carrito) {
|
|
const li = document.createElement("li");
|
|
|
|
li.textContent =
|
|
`${item.nombre} x${item.cantidad} - $${item.precio * item.cantidad}`;
|
|
|
|
carritoLista.appendChild(li);
|
|
|
|
total += item.precio * item.cantidad;
|
|
}
|
|
|
|
totalTexto.textContent = `Total: $${total}`;
|
|
}
|
|
|
|
mostrarProductos();
|