Eu entendi que tinha que adicionar um outro botão para desaparecer com a lista então adicionei um botão ao meu HTML ficando assim
<!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 data-mostrar="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 data-botao="desmostrar" >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>
<script src="main.js" ></script>
</body>
</html>
e o codigo em JS fico assim
const botao = document.querySelector('[data-botao]')
const lista = document.querySelector('.lista')
const botaoMostrar = document.querySelector ('[data-mostrar]')
botaoMostrar.onclick =function (){
mostrar()
}
botao.onclick = function (){
esconder();
}
function esconder (){
lista.style.display = ('none')
}
function mostrar (){
lista.style.display = ('block')
}
Nem imaginei em colocar osdata attributes direto no CSS, mas o importante é que funcionou. kkkkkkkk
