[Projeto] Minha resolução

Depois de quebrar muito a cabeça essa foi minha solução

1 - Criei um botão no HTML para esconder a lista; 2 - No JavaScript criei uma variável que armazena a lista que contém todas as cores ; 3 - Criei duas variáveis uma com o querySelector do botão que mostra as cores e outra com o querySelector do botão que esconde as cores; 4 - Em cada variável adicionei um addEventListener que dentro possui um lista.setAttribute permitindo mudar o estado do css de cada um dos botões com o código lista.setAttribute("style", "display:none ou block"), block utilizado no botão mostrar e none no botão esconder.

Códigos:

HTML:

<button id="mostrar">Aluratintas em estoque:</button>

  <ul class="lista">
    <li cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
    <li cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
    <li cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
    <li cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
    <li cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
    <li cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
  </ul>
<button id="esconder">Ocultar estoque</button>

JS:

const lista = document.querySelector("ul");

const botaoMostrar = document.querySelector("#mostrar").addEventListener("click", () => {
    lista.setAttribute("style", "display: block");
});

const botaoEsconder = document.querySelector("#esconder").addEventListener("click", () => {
    lista.setAttribute("style", "display: none");
});