HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="./desafio.css">
</head>
<body>
<h1 class="titulo">Aluratintas em estoque:</h1>
<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>
<button onclick="mostraTintas(this)" botao>Esconder Lista</button>
<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>
</body>
<script src="./desafio.js"></script>
</html>
optei por alterar o button para um h1, afinal acredito que faz mais sentido, também adicionei uma classe no titulo para manter as mesmas caracteristicas do button. Alteração no CSS:
button , .titulo {
font-size: 24px;
font-family: "Futura Lt BT", sans-serif;
background-color: black;
background-repeat: no-repeat;
cursor: pointer;
overflow: hidden;
outline: none;
padding: 8px 20px 8px 20px;
color: white;
box-shadow: 0px 0px 5px gray;
border-radius: 5px 5px 0 0;
border: none;
transition: 500ms;
opacity: 0.8;
margin: 30px 0;
}
já no js optei por fazer somente uma função: JS:
function mostraTintas() {
var lista = document.querySelectorAll(".item")
lista.forEach(element => {
if (element.style.display == "none") {
element.style.display = "block";
document.querySelector("[botao]").textContent = "Ocultar tintas";
}
else {
element.style.display = "none";
document.querySelector("[botao]").textContent = "Mostrar tintas";
}
});
}
