1
resposta

[Sugestão] Minha Solução

<!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>

  <div class="stock">
    <button data-button="show-button" id="show-button">Aluratintas em estoque:</button>
    <button data-button="hide-button" id="hide-button">Aluratintas esconder</button>
  </div>

  <ul class="lista" data-lista="listaDeCores">
    <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="main.js"></script>

</body>
</html>

Javascript:

const listadecores = document.querySelector("[data-lista]");


const botao = document.querySelectorAll('[data-button]');

botao.forEach( (elemento) => {
    elemento.addEventListener("click", (evento) => {
        mostraTintas(evento.target);
    }
    )
} )


function mostraTintas (botaoClicado) {

    if (botaoClicado.id === 'show-button') {
        listadecores.style.display = "block";

    }
    else {
        listadecores.style.display = "none";
    }
}
1 resposta

Oi Giovana, tudo bem?

Parabéns por praticar e muito obrigada por compartilhar com a gente o seu código! Muito legal ver você praticando :D

Continue os bons estudos.

Um abraço.