Aplicar los principios de manipulación del DOM, carga asíncrona de información y creación de elementos dinámicos para mejorar la experiencia de usuario en una tienda en línea básica.

90 minutos ( o menos)

• Editor de código (VS Code recomendado)

• Navegador actualizado (Chrome, Firefox, Edge)

• Carpeta de proyecto base con archivos:

  • index.html

  • style.css

  • productos.json (simulará una base de datos de productos)

  • main.js

1. Crea el archivo index.html con lo básico:

   • Encabezado con el título de la tienda

   • Contenedor para los productos (<div id="productos">)

   • Carrito lateral (<div id="carrito">)

2. Agrega estilo básico con style.css

   • Grid para los productos

   • Estilo para botones “Agregar al carrito”

3. Crea un archivo productos.json con datos como:

[  {    "id": 1,    "nombre": "Brownie Vegano",    "precio": 35,    "imagen": "brownie.jpg"  },  {    "id": 2,    "nombre": "Cupcake Vainilla",    "precio": 30,    "imagen": "cupcake.jpg"  }]

• En main.js, usa fetch() para cargar productos.json:

fetch("productos.json")
  .then(res => res.json())
  .then(data => {
    mostrarProductos(data);
  });

• Crea la función mostrarProductos(data) que recorra los productos y los agregue al DOM con innerHTML dinámico.

function mostrarProductos(productos) {
  const contenedor = document.getElementById("productos");
  productos.forEach(producto => {
    const div = document.createElement("div");
    div.classList.add("producto");
    div.innerHTML = `
      <img src="${producto.imagen}" alt="${producto.nombre}">
      <h3>${producto.nombre}</h3>
      <p>$${producto.precio}</p>
      <button class="agregar" data-id="${producto.id}">Agregar</button>
    `;
    contenedor.appendChild(div);
  });
}

• Agrega un eventListener general para detectar clics en los botones “Agregar”

document.addEventListener("click", function(e) {
  if (e.target.classList.contains("agregar")) {
    const id = e.target.getAttribute("data-id");
    agregarAlCarrito(id);
  }
});

• Crea una función agregarAlCarrito(id) que busque el producto, lo agregue a un arreglo y actualice el DOM del carrito en tiempo real.

1. Agrega un mensaje tipo "toast" que diga “Producto agregado” por 3 segundos usando setTimeout() y creación dinámica de un div

function mostrarAlerta(mensaje) {
  const alerta = document.createElement("div");
  alerta.className = "toast";
  alerta.innerText = mensaje;
  document.body.appendChild(alerta);

  setTimeout(() => {
    alerta.remove();
  }, 3000);
}

1. Llama a esta función cada vez que se agrega un producto.

1. Evita que se agregue dos veces el mismo producto al carrito mostrando un mensaje diferente.

• Una tienda web que carga productos de forma asíncrona.

• Permite agregar productos al carrito sin recargar la página.

• Muestra mensajes dinámicos al usuario.

• Manipula el DOM en tiempo real.

Más información:

https://www.frexus.dev/post/sitios-web-dinamicos-dom-javascript/