Eu criei três data-attributes (não reparem que meu código tá bilíngue, acabei criando coisas usando português e inglês :D
- para o botão de exibir [data-display-list]
- para o botão de esconder [data-hide-list]
- para a lista [data-lista]
Meu main.js ficou assim:
const displayButton = document.querySelector('[data-display-list]');
const listaDeCores = document.querySelector('[data-lista]');
const hideButton = document.querySelector('[data-hide-list]');
displayButton.addEventListener('click', () => listaDeCores.classList.add('showList'));
hideButton.addEventListener('click', () => listaDeCores.classList.remove('showList'));
Essa classe showList
criei no arquivo CSS esta classe .showList { display: block; }
E na classe que já existia .lista
eu adicionei um display: none
, pra que a página carregasse sem exibir a lista. Assim, ela aparece quando clicado o primeiro botão, e desaparece quando clicado o novo botão.
Só pra não ficar "meia fofoca", segue o código dos botões (tirei o onclick):
<button data-display-list>Exibir tintas em estoque:</button>
<button data-hide-list>Limpar Lista</button>