1
resposta

Solução adicionado Data-Attr

Fiz uma pequena alteração no HTML, não era necessária, mas queria forçar o uso de data-attributes:

<button data-button="mostra">Tintas em estoque:</button>

  <ul class="lista">
    <li data-cor cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
    <li data-cor cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
    <li data-cor cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
    <li data-cor cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
    <li data-cor cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
    <li data-cor cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
    <button data-button="esconde">Esconder Tintas</button>

  </ul>

Dessa forma o botão de esconder só aparece quando as tintas estão sendo exibidas.

JS:

const tintas = document.querySelector(".lista");

tintas.style.display = "none";

const buttonMostra = document.querySelector('[data-button="mostra"]')

buttonMostra.addEventListener("click", () =>
{   
    let display = tintas.style.display;
    if(display === "block")
        alert("Already showing")
    else    
    tintas.style.display = "block";
} )

const buttonEsconde = document.querySelector('[data-button="esconde"]')

buttonEsconde.onclick = () =>
{
    tintas.style.display = "none";
}
1 resposta

Olá André, tudo bem?

Muito boa a solução que você encontrou! Obrigada por compartilhar com a gente, ficou super legal :D

Parabéns por praticar, assim você consegue fixar bem os conceitos.

Continue os bons estudos.

Um abraço.