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