Picture Perfect explainer

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[1] 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 animal[1], using picture.src = animal[1]. 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 animal[2] using description.textContent = animal[2]. Finally, we can add the description to the page using body.appendChild(description).

JavaScript Concepts: .textContent, .createElement(), document, body, .appendChild(), .src, Arrays, For…of Loops

HTML Concepts: h1, h2, img, p

import { animals } from 'animalShelter.data';

let title = document.createElement('h1');
title.textContent = 'Adoptable Animals';
document.body.appendChild(title);

for (let animal of animals) {
    
    let animalName = document.createElement('h2');
    animalName.textContent = animal[0];
    document.body.appendChild(animalName);
    
    let picture = document.createElement('img');
    picture.src = animal[1];
    document.body.appendChild(picture);
    
    let paragraph = document.createElement('p');
    paragraph.textContent = animal[2];
    document.body.appendChild(description)


}  

I keep getting htis error i do not understand why.
'Make sure the order of the elements inside the loop is h2 , img , then p’ .

1 Like

Hey there,

When you create the <p> element, you are saving it to a variable named paragraph. However, when you add it to the body, you have document.body.appendChild(description). Try changing it to document.body.appendChild(paragraph), and the puzzle should complete.

Hope this helps!
Ben

Wow!!! Thanks I did not see that.

import { animals } from 'animalShelter.data';

let title = document.createElement('h1');
title.textContent = 'Adoptable Animals';
document.body.appendChild(title);

for (let animal of animals) {
    
    let animalName = document.createElement('h2');
    animalName.textContent = animal[0];
    let picture  = document.creatElement ('img')
       picture.src = animal[1];
    let   description = document.createElement('paragraph');
      description.textContent = animal[2];
      

        document.body.appendChild(animalName);
        document.body.appendChild(picture);
        document.body.appendChild(paragraph);
 
}

Hey there, you’ve got a missing e in createElement() on this line:

let picture  = document.creatElement ('img')

Also, this line has a few issues:

let   description = document.createElement('paragraph');

Remove those extra spaces between let and description. Also, change 'paragraph' to just 'p'. The line should look like this:

let description = document.createElement('p');

Finally, notice that in the above line, you’re storing the new paragraph in a variable named description, but here, you’re calling it paragraph, which doesn’t exist:

document.body.appendChild(paragraph);

Hope this helps!
Ben

1 Like

Thank you so much.
this last line help me so much and
again i have to say that this grasshopper app is super cool
in 2 days i learn many things about javascript,HTML and CSS

1 Like

import { animals } from ‘animalShelter.data’;

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);

for (let animal of animals) {

let animalName = document.createElement('h2');
animalName.textContent = animal[0];
document.body.appendChild(animalName);

let picture = document.createElement('img')
img.src = animal[1]
document.body.appendChild(picture)

let description = document.createElement('p')
description.textContent = animal[2]
document.body.appendChild(description)

}

That is my code. I keep getting a error message img is not defined. Help
Nevermind I fixed it. I put img.src when I was supposed to put picture.src

1 Like

Hello!
This is my code:

import { animals } from 'animalShelter.data';

let title = document.createElement('h1');
title.textContent = 'Adoptable Animals';
document.body.appendChild(title);

for (let animal of animals) {
    
    let animalName = document.createElement('h2');
    animalName.textContent = animal[0];
    document.body.appendChild(animalName);
    let picture = document.createElement('img');
    picture.srс = animal[1];
    document.body.appendChild(picture);
    let description = document.createElement('p');
    description.textContent = animal[2];
    document.body.appendChild(description);
}

Error: Try setting the .src of picture to animal[1]
Please, help me to find where I am wrong?

I’m sorry, my code is right, but in string ‘picrute.src’ letter ‘c’ i’ve wrote by cyrillic :slight_smile: