[Projeto] Solução criando o botão no JavaScript | JavaScript: manipulando o DOM

Criei dois data-atributes( lista e botao), defini o estilo da lista como none e criei o botao esconder cores no JavaScript para que assim ele so apareça caso a lista de cores esteja visivel.

<!DOCTYPE html>
<html lang="pt-br" >
<head>
  <meta charset="UTF-8">
  <title>Manipulando o DOM - Aula 3</title>
  <link rel="stylesheet" href="ex03.css">
</head>
<body>

  <button botao>Aluratintas em estoque:</button>

  <ul lista 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>

  <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="ex03.js"></script>

</body>
</html>

.lista {
    padding: 20px;
    list-style-type: none;
    border: 4mm ridge rgba(234, 122, 11, 0.992);
    display: none;
  }

const listaCores = document.querySelector('[lista]');
const botaoMostra = document.querySelector('[botao]');
const botaoEsconde= document.createElement('button');

botaoMostra.addEventListener('click', () => {

    botaoEsconde.innerText = 'Esconder cores';
    listaCores.appendChild(botaoEsconde);
    listaCores.style.display ='block';
})

botaoEsconde.addEventListener('click', () => {

    listaCores.style.display = 'none';
})

Chegou a hora de transformar