Entrar Ainda não tem acesso?
3
respostas

Minha solução

Referente ao curso JavaScript: manipulando o DOM, no capítulo Montando um robô e atividade Consolidando o seu conhecimento

por Pedro Henrique de Oliveira Santos
| 88.2k xp | 38 posts
<div class="botoes">
    <button class="botao" data-funcao="mostrar">Mostrar estoque:</button>
    <button class="botao" data-funcao="esconder">Esconder Estoque</button>

</div>

<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="./main.js"></script>
3 respostas
por Pedro Henrique de Oliveira Santos
| 88.2k xp | 38 posts

const lista = document.querySelector(".lista"); const btns = document.querySelectorAll(".botao");

btns.forEach( (elemento) => { elemento.addEventListener("click", (evento) => { manipulaEvento(evento.target.dataset.funcao, lista) }) })

function manipulaEvento (operacao, elementoManipulado){ if (operacao == "mostrar"){ elementoManipulado.classList.remove("visibilidade"); } else { elementoManipulado.classList.add("visibilidade"); }}

por Pedro Henrique de Oliveira Santos
| 88.2k xp | 38 posts

E adicionei no css a class

.visibilidade { display: none; }

por Lorena Garcia
| 8300.3k xp | 12158 posts
Alura Scuba Team Suporte Educacional

Oi Pedro, tudo bem?

Muito obrigada por compartilhar com a gente o seu resultado! Com certeza irá ajudar outras pessoas no futuro :D

Parabéns pela solução encontrada.

Um abraço e bons estudos.