1
resposta

MInha resolução (com funções)

Eu poderia ter adicionado a classe "hidden" na tag "ul", porém, da maneira que eu fiz me fez treinar estruturas de repetição.

Adicionei a classe "hidden" em todos os itens da lista, e, meu código js ficou assim:

const botaoExibe = document.querySelector(".botao_exibe");
const botaoEsconde = document.querySelector(".botao_esconde");

const listaDasCores = document.getElementsByClassName("item")

function exibeLista() {
    for (i = 0; i < listaDasCores.length; i++) {
        listaDasCores[i].classList.remove("hidden")
    }
}

exibeLista();

function escondeLista() {
    for (i = 0; i < listaDasCores.length; i++) {
        listaDasCores[i].classList.add("hidden")
    }
}

botaoExibe.addEventListener("click", () => {
    exibeLista();
})

botaoEsconde.addEventListener("click", () => {
    escondeLista();
})
1 resposta

Olá João, tudo bem?

Parabéns por ter conseguido treinar suas habilidades de estruturas de repetição! É muito importante praticar e se desafiar para evoluir na programação.

Sua solução para adicionar a classe "hidden" em todos os itens da lista utilizando funções ficou muito boa! É uma forma eficiente de esconder e exibir elementos no DOM.

Continue praticando e explorando outras formas de manipulação do DOM com JavaScript. Espero ter ajudado e bons estudos!