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