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

2 Likes

help

1 Like

1 Like

1 Like

It’s repetitively saying that it’s incorrect although it matches the demonstration.

1 Like

You’re so close! Change button.textContext to button.textContent.

2 Likes

@Grasshopper_Ben
please explain how import is used in the js file

import { pictures } from ‘animalPics.data’;

for (let picture of pictures) {
let img = document.createElement(‘img’);
img.src = picture;

document.body.appendChild(img);

}

1 Like

Hi @Grasshopper_Ben @Grasshopper_Heather @grasshopperexplainer

I got the result of the code

I need to know two points :

  1. how the variable pictures is declared

  2. and how is the variable pictures imported in the javasctript file

1 Like

Hey there, pictures is declared in additional code, and then imported into this puzzle so it can be used.

Importing and exporting code is useful for keeping files of code neat and organized.

For example, let’s say you have a website where users can make posts and follow other users. Rather than have all of the site’s code in one massive file, it might be a better idea to separate the code into smaller, more focused files. For example, code for user actions like following and unfollowing users can be in one file. Code for liking and sharing posts can be in another file. This makes each file smaller and easier for programmers to maintain.

You can read more about importing and exporting “modules” of code here.

Hope this helps!
Ben

2 Likes

The following link explains How import is used in javascript , html .:

1 Like

the additional code for Loppy Explainer
is

let pictures = [

let pictures = [ 
' https://www.ardeaprints.com/p/172/jd-20683-cat-kitten-paper-bag-1825653.jpg ' ,
      
"https://imgs.mongabay.com/wp-content/uploads/sites/20/2020/02/06130403/ECarver_PochardDuck_Durrell3_Banner.jpg",

           
"https://images.indianexpress.com/2019/06/giraffe.jpg"   

]

export {pictures}

I have used different urls from the loopy explainer exercise

My output looks like this

1 Like

how had you do it please tell me