Resolução do desafio | JavaScript: manipulando o DOM

Tive um pouco de dificuldade durante a execução e acabei resolvendo sem o uso de data-attributes e sem alterar o html e css (está comentada no arquivo js). Porém, também fiz a versão mais próxima à disponibilizada pelo instrutor.

**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 id="botao" >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>

  <div>
    <button id="botaoMostrar">mostrar</button>
    <button id="botaoEsconder">esconder</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>

CSS

  [data-lista="mostrar"] { 
    display: block; 
  }

[data-lista="esconder"] { 
    display: none;
  }

Javascript

// Resolução sem usar data attributes
/*
const lista = document.querySelector('ul');
const botao = document.querySelector('#botao');


botao.addEventListener('click', () => {
    if (lista.style.display ==='block') {
         lista.style.display ='none';
    } else {
        lista.style.display ='block';
}

})
*/

// Resolução usando data attributes

const lista = document.querySelector('ul');
const botaoMostrar = document.querySelector('#botaoMostrar')
const botaoEsconder = document.querySelector('#botaoEsconder');

botaoMostrar.addEventListener('click', () => {
    lista.setAttribute('data-lista', 'mostrar')
});

botaoEsconder.addEventListener('click', () => {
    lista.setAttribute('data-lista', 'esconder')
});

Mergulhe em programação