JS:
const ListaCores = document.querySelector('#ListaCores');
const MostraBtn = document.querySelector('#mostrartinta');
const OcultaBtn = document.querySelector('#ocultatinta');
OcultaBtn.addEventListener('click', (evento) => {
ListaCores.style.display = 'none'
});
MostraBtn.addEventListener('click', (evento) => {
ListaCores.style.display = 'block'
});
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="./style.css">
<script defer src="main.js"></script>
</head>
<body>
<button id="mostrartinta">Mostrar Aluratintas:</button>
<button id="ocultatinta">Ocultar Aluratintas:</button>
<ul class="lista" id="ListaCores">
<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>
</body>
</html>
