Bati cabeça, viu?
Vai lá minha solução:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="./css/exercicio3.css" />
</head>
<body>
<div class="botoes">
<button onclick="mostraTintas(this)" acao="mostra">
Mostrar em estoque:
</button>
<button onclick="mostraTintas(this)" acao="oculta">
Ocultar estoque:
</button>
</div>
<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>
<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>
const lista = document.querySelector('.lista')
function mostraTintas() {
const btns = document.querySelectorAll('button')
btns.forEach((el) => {
el.addEventListener('click', () => {
let atributo = el.getAttribute('acao')
let estado = atributo === 'mostra' ? 'block' : 'none'
lista.style.display = estado
})
})
}
</script>
</body>
</html>
No CSS inclui no final um estilo para deixar os botões lado a lado
.botoes {
display: flex;
gap: 1em;
}
