Actividad 29: Construyendo Componentes con Objetos (2)

Objetivo
Practica con los objetos, extrayendo datos para usarlos en elementos del DOM.

Enunciado
Acaba de diseñar la página web del ejercicio 28.
Secciones a mostrar mediante objetos javascript:

<nav>Colocando un menú como el de la actividad 27</nav>
<header class=»hero-image»>Siguiendo el ejemplo How to create a Hero Image</header>
<div id=»contenedor-productos»>Todos los productos, Siguiendo el ejemplo How to create a Product Card</div> 

Instrucciones

• Sigue los mismos pasos que en la actividad 28
• Implementa el ejemplo Image Magnifier Glass en una imagen de un producto
• ¿Se puede aplicar en todas? ¿Que solución te da la IA y que propone? Analiza las declaraciones del guión javascript

Parte 2
Desarrolar la misma interfície pero obteniendo los datos de un archivo json almacenado en el servidor remoto
Usaremos fetch para leer el JSON y crearemos una función reutilizable para pintar las tarjetas.  

// Variable global para guardar los productos que vengan del JSON
let listaProductos = [];

// PASO 1: Usamos Fetch para leer el archivo JSON local
fetch(‘productos.json’)
    .then(respuesta => respuesta.json())
    .then(datos => {
        listaProductos = datos; // Guardamos los datos
        pintarTarjetas(listaProductos); // Pintamos todos al cargar la página
    })
    .catch(error => console.error(«Error cargando los productos:», error));


// PASO 2: Función reutilizable para fabricar las tarjetas (Tu actividad original evolucionada)
function pintarTarjetas(productosAMostrar) {
    const contenedor = document.getElementById(‘contenedor-productos’);
   
    // Limpiamos el contenedor por si había tarjetas antes (importante para el filtro)
    contenedor.innerHTML = «»;

    // Recorremos el array que recibe la función
…

// A. Creamos el contenedor de la tarjeta
 // B. Creamos el título
// C. Creamos el precio (formateando el número)
// D. Creamos el botón aplicando el color dinámico del objeto
// E. Unimos los elementos (appendChild)
// F. Los metemos en el contenedor