Animal Party pt-br Explainer

Explicação de Festa de animais

Objetivo deste desafio: Usar o for...of loop para adicionar informações de um banco de dados de animais a uma página da Web.

Passo a passo da solução: No código com o qual você começa, um laço for...of faz a iteração pela array animals importada do código adicional. O laço for…of cria um elemento h2 e img para cada animal da array animals e os anexa ao body.

Neste desafio, você criará um elemento parágrafo para cada animal da array animals e o anexará embaixo de cada elemento de imagem.

Para concluir o desafio, dentro do for..of loop, faça uma variável chamada description que armazena um novo elemento de parágrafo usando document.createElement('p'). Em seguida, defina seu conteúdo de texto como animal[2]. Por último, anexe o elemento description ao body. Para que cada parágrafo fique embaixo de cada foto, verifique se anexou a description após a linha que anexa a imagem, body.appendChild(img).

Solução do código de exemplo:

(Toque abaixo para revelar)

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);
}

Conceitos de HTML:<p>, <img>, <h2>,

Conceitos de JavaScript: .textContent, .createElement(), document, body, .appendChild()`, laço for…of, comando de importação, variáveis