Possivel Resolução | JavaScript: manipulando o DOM | Alura

Retirei o botão inicial e coloquei dois embaixo usando o data-lista para marcalos. inicialmente tinha colocado nomes no data-lista mas retirei porque nao usei. deixei sem valor

<body>
  <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 data-lista>--ESCONDER--</button>
      <button data-lista>--MOSTRAR--</button>

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

No Javascript a variavel botao recebe o data-lista do html, e a variavel ul recebe a classe .lista da tag ul dentro do html

o botao[0] do array espera o evento de clique e altera o css para 'none' o botao[1] do array espera o evento de clique e altera o css para 'block'

// botao recebe array de 'data-lista' 
// lista recebe a classe lista na tag ul do html
let botao = document.querySelectorAll("[data-lista]")
let ul = document.querySelector(".lista")

// se o botao0 for clicado muda o estilo para none e esconde tudo
botao[0].addEventListener('click', () => {
    ul.style.display = "none"
})
// se o botao1 for clicado muda o estilo para block e mostra tudo
botao[1].addEventListener('click', () => {
    ul.style.display = "block"
})
/* LOGICA DO addEventListener
     addEventListener (OQUE ESPERAR,  OQUE FAZER){
        roteiro
     }
*/

ainda tenho dificuldade com a linguagem e vou comentando no codigo oque esta acontecendo. aberto para criticas e sugestoes.

Mergulhe em programação