Actividad 28: Construyendo Componentes con Objetos

Objetivo
Aprender a usar los métodos document.createElement(), .appendChild() y las propiedades de un objeto para fabricar y maquetar elementos HTML dinámicamente desde JavaScript.

Enunciado
Imagina que estás programando una tienda online o un blog y necesitas
mostrar la tarjeta de un producto. Crea una página web que, al cargar,
lea los datos de un objeto llamado producto y construya visualmente su «tarjeta de presentación» (Card) dentro de un contenedor vacío. El resultado será como el ejemplo adjunto componentes.png

Instrucciones
// 1. HTML. Solo necesitamos un contenedor vacío con un id. JavaScript se encargará de llenarlo.
<h1>Escaparate de Productos</h1> 
<div id=»contenedor-productos»></div> 
<script src=»componentes.js»></script>

// 2. Define el objeto JavaScript que contiene la funete de los datos
const producto = {
titulo: «Auriculares Inalámbricos»,
precio: «49.99€»,
colorEtiqueta: «green»
};

// 3. Guarda en una variable el contenedor donde se insertará la tarjeta
// 3. Crea los elementos del DOM
// Paso A: Creamos el contenedor de la tarjeta (un <div>)
// Paso B: Creamos el título (un <h3>) y le pasamos el dato del objeto
// Paso C: Creamos el precio (un <p>) y le pasamos el dato del objeto
// Paso D: Creamos el botón (un <button>) y usamos los datos del objeto
// 4. Unimos los elementos HTML y los adjuntamos a contenedor-productos» :

• // Metemos el título, el precio y el botón DENTRO del div de la tarjeta
• // Finalmente, metemos la tarjeta completa dentro del contenedor del HTML

Parte 2: Podemos hacer lo mismo con un array de objetos y así consegiur todas las terjetas que necesitemos