The aim of this puzzle: Loop through data to add images and descriptions of animals to a webpage.
Walkthrough of the solution: In the JS tab, and inside the for…of loop, each animal name is being added as new
h2 elements. Each
animal array in the data has 3 pieces of information: [name, imageSource, description]. The name is at index 0, the image source is at index 1, and the description is at index 2.
To add the image below each name, we can create an
img element that uses
animal as the source. Still inside the loop, below the
animalName code, create a new variable named
picture and assign an
img element to it. For example,
let picture = document.createElement('img'). Then, set the source of that element to
picture.src = animal. Then append that element to the body using
body.appendChild(picture). That will add each picture to the page as the loop iterates.
Next, we need to add the description for each animal. We can create a new variable named
description and assign it a new
p element using
let description = document.createElement('p'). The textContent of that element is blank, be we can assign it the string stored in
description.textContent = animal. Finally, we can add the description to the page using
.createElement(), document, body,
.src, Arrays, For…of Loops