Alterações no HTML para: incluir os atributos "data", colocar o display da lista como "none", criar um botão com "display none" para fechar a lista:
<!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-botao-aparecer>Aluratintas em estoque:</button>
<button style="display: none;" data-botao-fechar>Fechar lista</button>
<ul class="lista" style="display: none;" data-lista-tintas>
<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>
</body>
<script src="main.js"></script>
</html>Javascript: funções aparecer (adiciona propriedade display: block) e desaparecer (adiciona propriedade display: none) e funções on click para abrir e fechar a lista, usando as funções aparecer e desaparecer com os elementos:
const botaoAparecer = document.querySelector('[data-botao-aparecer]');
const listaTintas = document.querySelector('[data-lista-tintas]');
const botaoFecharLista = document.querySelector('[data-botao-fechar]');
botaoAparecer.onclick = () => {
aparecer(listaTintas);
desaparecer(botaoAparecer);
aparecer(botaoFecharLista);
};
botaoFecharLista.onclick = () => {
desaparecer(listaTintas);
desaparecer(botaoFecharLista);
aparecer(botaoAparecer);
}
function aparecer(elementoHtml) {
elementoHtml.style.display = "block";
}
function desaparecer(elementoHtml) {
elementoHtml.style.display = "none";
}
