Loopy pt-br Explainer

Explicação de Amalucado

Objetivo do desafio: Passar por um conjunto de URLs de imagens e criar um elemento img e button para cada uma delas.

Passo a passo da solução: Neste desafio, uma array de URLs é importada para o desafio. Um laço for então faz a iteração por essa array e para cada URL é criado um novo elemento img usando document.createElement('img').

Em seguida, o atributo src da nova imagem é definido para a URL atual na array. Por último, a nova imagem é adicionada à página usando o método .appendChild().

Para concluir este desafio, precisamos editar o laço for para também criar um botão abaixo de cada imagem com o texto 'Like'. Para isso, use document.createElement('button') para criar um novo elemento. Armazene esse elemento em uma nova variável. Em seguida, defina o .textContent deste novo botão como 'Like'.

Por último, use o método .appendChild() para adicionar o novo botão ao body. Verifique se o botão é adicionado após a img.

Solução do código de exemplo:

(Toque abaixo para revelar)

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

Conceitos de JavaScript: Objeto do documento, body, Laço for, Importações, document.createElement(), .appendChild(), atributo src, atributo textContent