Animal Party es-419 Explainer

Puzzle Explainer
#1

Explicador de Fiesta de animales

Objetivo de este acertijo: Usar un for...of loop para agregar información de una base de datos de animales a una página web.

Tutorial de la solución: En el código de inicio, un for...of loop itera por un arreglo animals que se importa del código adicional. El for…of loop crea un elemento h2 e img para cada animal en el arreglo animals y los anexa a body.

En este acertijo, crearás un elemento de párrafo para cada animal en el arreglo animals y lo anexarás debajo de cada elemento de imagen.

Para completar el acertijo, dentro del for..of loop, crea una variable llamada description que almacene un nuevo elemento de párrafo usando document.createElement('p'). Luego, define su contenido de texto como animal[2]. Por último, anexa el elemento description a body. Para que cada párrafo quede debajo de cada foto, asegúrate de anexar description después de la línea que anexa la imagen, body.appendChild(img).

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

JavaScript

import { animals } from 'cuteAnimals.data';

let title = document.createElement('h1');
title.textContent = 'Cute Animals';
document.body.appendChild(title);

for (let animal of animals) {
    
    let name = document.createElement('h2');
    name.textContent = animal[0];
    
    let img = document.createElement('img');
    img.src = animal[1];
    
    mlet description = document.createElement('p');
    description.textContent = animal[2];
 
    document.body.appendChild(name);
    document.body.appendChild(img);
    document.body.appendChild(description);
}

Conceptos de HTML:<p>, <img>, <h2>,
Conceptos de JavaScript: .textContent, .createElement(), document, body, .appendChild()`, for…of loop, declaración de importación, variables

#2
#3