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