Picture Perfect es-419 Explainer

Puzzle Explainer
1

Explicador de Imagen perfecta

Objetivo de este acertijo: Iterar por los datos para agregar imágenes y descripciones de animales a una página web.

Tutorial de la solución: En la pestaña de JS, y dentro del for…of loop, cada nombre de animal se agrega como nuevos elementos h2. Cada arreglo animal en los datos tiene 3 elementos de información: [nombre, imageSource, descripción]. El nombre está en el índice 0, la fuente de la imagen está en el índice 1 y la descripción está en el índice 2.

Para agregar la imagen debajo de cada nombre, podemos crear un elemento img que use animal[1] como la fuente. Todavía dentro del ciclo, debajo del código animalName, crea una nueva variable llamada picture y asígnale un elemento img. Por ejemplo, let picture = document.createElement('img'). Luego, define la fuente de ese elemento como animal[1], usando picture.src = animal[1]. Luego, anexa ese elemento al cuerpo usando body.appendChild(picture). Eso agregará cada imagen a la página a medida que el ciclo itera.

A continuación, debemos agregar la descripción de cada animal. Podemos crear una nueva variable llamada description y asignarle un nuevo elemento p usando let description = document.createElement('p'). El textContent de ese elemento está en blanco, pero podemos asignarle el string almacenado en animal[2] usando description.textContent = animal[2]. Por último, podemos agregar la descripción a la página usando body.appendChild(description).

Conceptos de JavaScript: .textContent, .createElement(), documento, cuerpo, .appendChild(), .src, arreglos, for…of loops

Conceptos de HTML: h1, h2, img, p

2
3
4

En caso de que estes aqui porque estas confundid@ te dejo esta ayuda

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

5

tiene un bug o algo por que hago lo que me dice el grass y no

6

Respuesta al acertijo

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

}

1 Like
7

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

 let button = document.createElement('button')
 button.textContent = 'Like'
 document.body.appendChild(button)

}