No index.html
<!DOCTYPE html>
<html lang="pt-br" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Aluratintas em estoque:</h1>
<!-- <button onclick="mostraTintas(this)">Aluratintas em estoque:</button> -->
<button botao="mostrarLista">Mostrar lista</button>
<button botao="removerLista">Remover lista</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>
<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>
No style.css
.lista {
background-color: rgb(62, 102, 235);
padding: 20px;
list-style-type: none;
border: 4mm ridge rgba(234, 122, 11, 0.992);
display: none;
}
No main.js
const botaoMostrarLista = document.querySelector("[botao=mostrarLista]")
const botaoRemoverLista = document.querySelector("[botao=removerLista]")
botaoMostrarLista.addEventListener("click", () => {
manipulaDados("[botao=mostrarLista]")
})
botaoRemoverLista.addEventListener("click", () => {
manipulaDados("[botao=removerLista]")
})
function manipulaDados(operacao) {
if(operacao === "[botao=mostrarLista]") {
document.querySelector(".lista").style.display = "block"
} else {
document.querySelector(".lista").style.display = "none"
}
}
