Ejercicio de JavaScript: carrito con subtotal y cantidades

Este ejercicio de JavaScript de carrito de compras combina eventos y cálculo de importes para construir un resumen que se actualiza al cambiar cantidades.

Enunciado

Crea dos productos con cantidades iniciales de cero. Permite sumar o restar unidades y calcula el subtotal sin cantidades negativas.

Solución comentada

Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.

<ul id="carrito"></ul>
<p>Subtotal: <output id="subtotal"></output></p>
<script>
  const productos = [
    { nombre: "Cuaderno", centimos: 790, cantidad: 0 },
    { nombre: "Bolígrafo", centimos: 250, cantidad: 0 }
  ];
  const euros = new Intl.NumberFormat("es-ES", {
    style: "currency", currency: "EUR"
  });
  const lista = document.querySelector("#carrito");
  const subtotal = document.querySelector("#subtotal");
  function actualizarTotal() {
    const total = productos.reduce(
      (suma, producto) => suma + producto.centimos * producto.cantidad, 0
    );
    subtotal.value = euros.format(total / 100);
  }
  for (const producto of productos) {
    const fila = document.createElement("li");
    const cantidad = document.createElement("span");
    cantidad.textContent = "0";
    fila.append(producto.nombre + ": " + euros.format(producto.centimos / 100) + " × ", cantidad);
    for (const paso of [-1, 1]) {
      const boton = document.createElement("button");
      boton.type = "button";
      boton.textContent = (paso === 1 ? "Añadir " : "Quitar ") + producto.nombre;
      boton.addEventListener("click", () => {
        producto.cantidad = Math.max(0, producto.cantidad + paso);
        cantidad.textContent = String(producto.cantidad);
        actualizarTotal();
      });
      fila.append(" ", boton);
    }
    lista.append(fila);
  }
  actualizarTotal();
</script>

Los importes se representan en céntimos y se convierten a euros al mostrar el total. Los botones conservan el foco porque el código actualiza los valores sin reconstruir las filas. Es un ejercicio de interfaz: un comercio real debe calcular y validar importes en su servidor.

Cómo comprobar tu solución

1. Comprueba que el subtotal inicial es 0,00 €.
2. Añade dos cuadernos y un bolígrafo. El subtotal esperado es 18,30 €.
3. Retira unidades hasta cero y verifica que una pulsación adicional no genera un valor negativo.

Reto adicional

Añade un coste de envío que dependa del subtotal. Mantén separados subtotal, envío y total para que el resultado sea fácil de comprobar.

Repasa los conceptos en el tutorial de MasterCodePro.