HTML / JAVASCRIPT :
Código completo do HTML e Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h3>Aluratintas em estoque:</h3>
<ul class="lista" data-lista="AAA">
<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>
<button data-acao="mostrarLista">Mostrar</button>
<button data-acao="esconderLista">Esconder</button>
<script>
const lista = document.querySelector("[data-lista]");
const button = document.querySelectorAll("[data-acao]");
button.forEach((elemento) => {
elemento.addEventListener("click", () => {
if (elemento.dataset.acao === "esconderLista") {
lista.dataset.lista = "esconder";
} else {
lista.dataset.lista = "mostrar";
}
});
});
</script>
</body>
</html>
CSS :
Adicionado o código seguinte no arquivo CSS:
[data-lista="mostrar"] > li {
visibility: visible;
}
[data-lista="esconder"] > li {
visibility: hidden;
}
