Loopy explainer

Aim of the puzzle: Loop through an array of image URLs, and create an img and button element for each one.
Walk through of solution: In this puzzle, an array of URLs is imported into the puzzle. A for loop then iterates through this array, and for each URL a new img element is created using document.createElement('img').

Then, the src attribute of the new image is set to the current URL in the array. Finally, the new image is added to the page using the .appendChild() method.

To complete this puzzle, we want to edit this for loop to also create a button below each image with the text 'Like'. To do so, use document.createElement('button') to create a new element. Store this element in a new variable. Then, set the .textContent of this new button to 'Like'.

Finally, use the .appendChild() method to add the new button to the body. Make sure the button is added after the img.

Sample code solution:

JavaScript

import { pictures } from 'animalPics.data';

for (let picture of pictures) {
    let img = document.createElement('img');
    img.src = picture;
    
    let button = document.createElement('button');
    button.textContent = 'like';
    
    document.body.appendChild(img);
    document.body.appendChild(button);
}

Javascript Concepts: Document object, body, For Loops, Imports, document.createElement(), .appendChild(), src attribute, textContent attribute