[Projeto] Minha solução | JavaScript: manipulando o DOM

Tentei fazer uma solução diferente da do instrutor e depois de muito tentar, consegui chegar nesta:

meu .html

<!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>



    <h1>Aluratintas</h1>
  <button class = "botao"> Tintas em estoque:</button>

  <ul class="lista" data-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 class = "close"> Fecha 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>
<script src="./main.js"></script>
</body>
</html>

meu .js

let listaTintas = document.querySelector('.lista')
let fechar = document.querySelector('.close')
let botao = document.querySelector('.botao')

        fechar.addEventListener('click', ()=>{
        listaTintas.style.display="none";
        fechar.style.display="none";
    });

        botao.addEventListener('click', ()=>{
        listaTintas.style.display="block";
        fechar.style.display="block";
    });