Olá Alura e colegas!
Abaixo deixo a minha solução para o desafio proposto.
No HTML acrescentei apenas o ID “botao” no botão.
<button id="botao">Alura tintas em estoque:</button>
No JS optei por criar duas funções, uma que mostra a lista e outra que esconde. No evento de click utilizei um operador ternário que verifica se o botão possui ou não a classe “close”, assim chamando a função correspondente. Ao invés de criar um novo botão para fechar a lista, escolhi utilizar o mesmo, alterando apenas o texto de “Alura tintas em estoque” para “Fechar Alura tintas".
const lista = document.querySelector(".lista");
const botao = document.querySelector("#botao");
const btnClasse = botao.classList;
/* Evento de click e condicional que verifica
se botão possui ou não a classe "close". */
botao.addEventListener("click", () => !btnClasse.contains("close") ? mostraLista() : escondeLista());
function mostraLista() {
botao.classList.add("close");
lista.setAttribute("data-lista", "mostrar");
botao.innerText = "Fechar Alura tintas";
}
function escondeLista() {
botao.classList.remove("close");
lista.setAttribute("data-lista", "esconder");
botao.innerText = "Alura tintas em estoque";
}
No CSS fiz a seleção do atributo data e utilizei o atributo opacity do CSS para mostrar e omitir a lista.
/*=Javascript link
================================================*/
[data-lista="esconder"] {
opacity: 0;
transition: all .5s;
}
[data-lista="mostrar"] {
opacity: 5;
transition: all .5s;
}
Qualquer dica de melhoria fico agradecido.
Abraços!!
