Explicador de Imagen perfecta
Objetivo de este acertijo: Iterar por los datos para agregar imágenes y descripciones de animales a una página web.
Tutorial de la solución: En la pestaña de JS, y dentro del for…of loop, cada nombre de animal se agrega como nuevos elementos h2. Cada arreglo animal en los datos tiene 3 elementos de información: [nombre, imageSource, descripción]. El nombre está en el índice 0, la fuente de la imagen está en el índice 1 y la descripción está en el índice 2.
Para agregar la imagen debajo de cada nombre, podemos crear un elemento img que use animal[1] como la fuente. Todavía dentro del ciclo, debajo del código animalName, crea una nueva variable llamada picture y asígnale un elemento img. Por ejemplo, let picture = document.createElement('img'). Luego, define la fuente de ese elemento como animal[1], usando picture.src = animal[1]. Luego, anexa ese elemento al cuerpo usando body.appendChild(picture). Eso agregará cada imagen a la página a medida que el ciclo itera.
A continuación, debemos agregar la descripción de cada animal. Podemos crear una nueva variable llamada description y asignarle un nuevo elemento p usando let description = document.createElement('p'). El textContent de ese elemento está en blanco, pero podemos asignarle el string almacenado en animal[2] usando description.textContent = animal[2]. Por último, podemos agregar la descripción a la página usando body.appendChild(description).
Conceptos de JavaScript: .textContent, .createElement(), documento, cuerpo, .appendChild(), .src, arreglos, for…of loops
Conceptos de HTML: h1, h2, img, p