HTML
Na minha resolução, eu adicionei um data-attribute no primeiro botão, data-botao="mostrar" , para mostrar a lista. E também, eu criei mais um botão abaixo da lista, com o atributo data-botao="esconder", para esconder a lista.
<!DOCTYPEhtml>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Manipulando o DOM - Aula 3</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<button onclick="mostraTintas(this)" data-botao="mostrar">Aluratintas em estoque:</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>
<button onclick="mostraTintas(this)" data-botao="esconder">Esconder tintas em estoque</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>
</html>JS
Um código simples, com a função contendo um if-else. Caso o valor do data-attribute, armazenado na const botao, seja igual a "mostrar", da um display=block para exibir a lista. Sendo um outro valor diferente de "mostrar", da um display=none para esconder a lista.
const lista = document.querySelector(".lista");
function mostraTintas(elemento) {
const botao = elemento.getAttribute("data-botao");
if (botao === "mostrar") {
lista.style.display = "block";
} else {
lista.style.display = "none";
}
}