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