Minha Soluçao | JavaScript

<body>


  <button  id="btnMostrarTintas">MostarTintas</button>
  <button  id="btnEsconderTintas">Esconder Tintas</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>

  <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="js.js"></script>
</body>

`_ const lista = document.querySelector('[data-lista]');

let btnEsconderTintas = document.querySelector('#btnEsconderTintas'); let btnMostrarTintas = document.querySelector('#btnMostrarTintas')

function EsconderTintas(){ lista.style.display ='none' }

btnEsconderTintas.addEventListener('click',EsconderTintas)

function MostrarTitas(){ lista.style.display ='flex' }

btnMostrarTintas.addEventListener('click',MostrarTitas)

Mergulhe em programação