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

cores.html

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

    <h1 class="titulo">Aluratintas em estoque:</h1>
  
  <button botao="abrirLista">Abrir lista</button>
  <button botao="fecharLista">Fechar lista</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>

  <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="-robotron-2000-projeto_inicial/js/cores.js"></script>
</body>
</html>

cores.js

const abreLista = document.querySelector("[botao=abrirLista]")

const fechaLista = document.querySelector("[botao=fecharLista]")

abreLista.addEventListener("click", () => {
    manipulaDados("[botao=abrirLista]")
})

fechaLista.addEventListener("click", () => {
    manipulaDados("[botao=fecharLista]")
})

function manipulaDados(operacao) {
    if(operacao === "[botao=abrirLista]") {
        document.querySelector(".lista").style.display = "block"
    } else {
        document.querySelector(".lista").style.display = "none"
    }
}

cores.css

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

Mergulhe em programação