No meu html eu adicionei os botões e a chamada para o arquivo js. Além disso utilizei data-attribute na lista e nos botões
<!DOCTYPE html>
<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)">Aluratintas em estoque:</button>
<div class="buttons">
<button data-change="show">Mostrar</button>
<button data-change="hide">Esconder</button>
</div>
<ul class="lista" style="display: none;" data-list>
<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="./script.js"></script>
</body>
</html>No código js, eu usei querySelector nos dois data-attributes criados, criei uma função para mudar o style e fiz um forEach para cada botão selecionado passar o data-change para a função de mudar style
const list = document.querySelector('[data-list]');
const button = document.querySelectorAll('[data-change]');
function changeDisplay(label){
if(label=='show'){
list.style.display = 'block';
}else if(label=='hide'){
list.style.display = 'none';
}
}
button.forEach((elemento) => {
elemento.addEventListener('click', (event) => {
changeDisplay(event.target.dataset.change);
});
});
