Loopy es-419 Explainer

Puzzle Explainer
#1

Explicador de Chiflado

Objetivo de este acertijo: Iterar por un arreglo de URL de imágenes y crear un elemento img y buttonpara cada uno.

Tutorial de la solución: En este acertijo, se importa un arreglo de URL al acertijo. Luego, un for loop itera por este arreglo y para cada URL se crea un nuevo elemento img usando document.createElement('img').

A continuación, el atributo src de la nueva imagen se define como URL actual en el arreglo. Por último, la nueva imagen se agrega a la página mediante el método .appendChild().

Para completar este acertijo, debemos editar este for loop para crear un botón debajo de cada imagen con el texto 'Like'. Para hacerlo, usa document.createElement('button') para crear un nuevo elemento. Almacena este elemento en una nueva variable. Luego, define .textContent de este nuevo botón como 'Like'.

Por último usa el método .appendChild() para agregar el nuevo botón a body. Asegúrate de que el botón se agregue después de img.

Solución del código de ejemplo:

JavaScript

import { pictures } from 'animalPics.data';

for (let picture of pictures) {
    let img = document.createElement('img');
    img.src = picture;
    
    let button = document.createElement('button');
    button.textContent = 'like';
    
    document.body.appendChild(img);
    document.body.appendChild(button);
}

Conceptos de JavaScript: object de documento, body, for loops, importaciones, document.createElement(), .appendChild(), atributo src, atributo textContent

#2
#3