Picture Perfect pt-br Explainer

Explicação de Imagem perfeita

Objetivo deste desafio: Passar um laço através de dados para adicionar imagens e descrições de animais a uma página da Web.

Passo a passo da solução: Na guia do JS e dentro do laço for…of, cada nome de animal está sendo adicionado como novo elemento h2. Cada array animal nos dados tem 3 partes de informação: [nome, imagemSource, descrição]. O nome está no índice 0, a origem da imagem está no índice 1 e a descrição está no índice 2.

Para adicionar a imagem abaixo de cada nome, podemos criar um elemento img que usa animal[1] como origem. Ainda dentro do laço, abaixo do código animalName, crie uma nova variável chamada picture e atribua um elemento img a ela. Por exemplo, let picture = document.createElement('img') Em seguida, defina a origem desse elemento como animal[1], usando picture.src = animal[1]. Em seguida, anexe esse elemento ao corpo usando body.appendChild(picture). Isso adicionará cada imagem à página conforme o laço faz a iteração.

A seguir, precisamos acrescentar a descrição de cada animal. Podemos criar uma nova variável chamada description e atribuir um novo elemento p a ela usando let description = document.createElement('p'). O textContent desse elemento está em branco, mas nós podemos atribuir a ele a string armazenada em animal[2] usando description.textContent = animal[2]. Por último, podemos adicionar a descrição à página usando body.appendChild(description).

Conceitos de JavaScript: .textContent, .createElement(), documento, corpo, .appendChild(), .src, Arrays, Laço for…of

Conceitos de HTML: h1, h2, img, p

estou colocando o codigo certo e esta dando erro para o termino.

1 Like

Verdade para mim também ocorre isso!!!

tá fora de ordem, é importante que esteja em ordem h2, img e p

1 Like

Valeu irmão, o meu estava dando errado porque o grasshopper estava dando a ordem invertida, comparando com o seu eu percebi o erro e consegui arrumar, tmj


pra mim so faltava o ponto-e-vírgula no final para fechar tudo!

Novamente caso alguém esteja precisando.

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 description = document.createElement('p');
description.textContent = animal[2];
document.body.appendChild(description);

image

solução