Animal Party explainer

The aim of this puzzle: Use a for...of loop to add information from a database of animals to a webpage.

Walkthrough of the solution: In the code that you start off with, a for...of loop iterates through an animals array that’s imported from additional code. The for…of loop creates an h2 and img element for each animal in the animals array and appends them to the body.

In this puzzle, you’ll create a paragraph element for each animal in the animals array and append it underneath each image element.

To complete the puzzle, inside the for..of loop, make a variable called description that stores a new paragraph element using document.createElement('p'). Then, set its text content to animal[2]. Finally, append the description element to the body. In order for each paragraph to go below each photo, be sure to append the description after the line that appends the image, body.appendChild(img).

Sample code solution:
(Tap below to reveal)

JavaScript

import { animals } from 'cuteAnimals.data';

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

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

HTML Concepts:<p>, <img>, <h2>,
JavaScript Concepts: .textContent, .createElement(), document, body, .appendChild()`, for…of loop, import statement, variables

2 Likes

help me please (https://gyazo.com/cc5628cbf99e82a8dee075a6032dcfaa.png)
https://gyazo.com/cc5628cbf99e82a8dee075a6032dcfaa

2

Hey there, you have a couple of typos in createElement and textContent. Fixing those should solve the puzzle.

Hope this helps!
Ben

Hey there, you’ve got a typo in description.

Ben

code does not compile

import { animals } from 'cuteAnimals.data';

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

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

Hey there, change .CreateElement to .createElement. That will fix the problem.

Ben

1 Like

Thanks Ben for the quick reply . specially for the motivation

1 Like

The for…of loop creates an h2 and img element for each animal in the animals array and appends them to the body .

Hi, I’m not understanding why a ‘for loop’ is needed for the code to work. I read the above, but I fail to see why or how this works. The for of loop iterates the code inside for each of the indices of ‘animal’. But…why do we need to do this? Why can’t we just call the indices of the animals array that we want to include, and didn’t we do that very thing?

Correct me if I’m wrong here, but the code:

  1. First we imported the array animals…so now we can call anything in the array freely now.

  2. We assigned the textContent to = “animal[2]” and =“animal[0]”. and the img.src to be ="animal[1]. So all we did was assigned 3 different things to 3 different indices of the array. So what is the purpose of iterating this code across every single index of the animals array? This animals array could have countless indices, is there something specific to java/html/css that requires us to call each index of the array in order to grab parts from it? I don’t understand why if I change animal to animals, and remove the for loop, the code isn’t showing the pictures/text.

  3. in the quote you say the loop creates an h2 and img element for each index of the array. I don’t understand the logic in this, why create an img element for every index? why an h2 for every index? We only assigned 3 index to very specific functions (1 h2, 1 p, 1 img) Why is it necessary to do this?.

  4. Sidenote: Is Indices is the correct plural way when referring to multiple index?

1 Like

@Grasshopper_Ben, @Grasshopper_Heather and @Grasshopper_Frankie, I have the exact same question

1 Like

@Grasshopper_Ben, @Grasshopper_Heather and @Grasshopper_Frankie @grasshopperexplainer

please in the Walkthrough of the solution it is said that animals array that’s imported from additional code

But there is no additional code in the Animal Party explainer

also in the earlier exercise : Loopy explainer

the same thing
please help a beginner… I am desaparate to be helped

@Grasshopper_Ben, @Grasshopper_Heather and @Grasshopper_Frankie @grasshopperexplainer

it will be a big help to understand how a for…of loop is used to iterate through database
ONLY IF

IF THE ADDITIONAL CODE IS DECLARED

hi @Joandy @Kerby
the additional code which is array for Animal Party Explainer is
and accordingly check the how for …of loop is used to loop through this array

let array = [

        ["Jenny" , "https://www.ardeaprints.com/p/172/jd-20683-cat-kitten-paper-bag-1825653.jpg", "The kitten in a bag"],

        ["Duck-Duck-Go" ,"https://imgs.mongabay.com/wp-content/uploads/sites/20/2020/02/06130403/ECarver_PochardDuck_Durrell3_Banner.jpg", "The family duck"],

        ["Heighty-Zif", "https://images.indianexpress.com/2019/06/giraffe.jpg", "the sun is no longer long to ..."]

        ]

        export{array}

I have used different urls in the array

My final output looks like this

1 Like

I have my code correct, I followed the instructions but it is saying to create my code below blah blah blah

here is a screenshort

i cant get an screenshort of code


What’s wrong with this code, it won’t run