Minha solução | JavaScript: manipulando o DOM | Alura

Depois de um dia inteiro batendo a cabeça na parede cheguei nesse resultado

Criei uma div no html com um button de mostrar e um de ocultar:

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Manipulando o DOM - Aula 3</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <button onclick="mostraTintas(this)">Aluratintas em estoque:</button>

  <ul class="lista" data-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>

  <div>
    <button data-button="mostrarEstoque">Mostrar estoque</button>
    <button data-button="ocultarEstoque">Ocultar estoque</button>
  </div>

    <a href="https://alura.com.br/" target="_blank"><img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"></a>

    <script src="main.js"></script>
</body>
</html>

const button = document.querySelectorAll('[data-button]');
const lista = document.querySelector('[data-lista]');

button.forEach((elemento) => {
    elemento.addEventListener("click", (evento) => {
        if(evento.target.dataset.button === "ocultarEstoque") {
            lista.style.visibility="hidden"
        } else {
            lista.style.visibility="visible"
        }
    })
})

Mergulhe em programação