Entrar Ainda não tem acesso?
3
respostas

[Sugestão] Resolução e Sugestão

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

por Eduardo Torres Costa Vinagre
| 68.1k xp | 13 posts

Olá! Estou compartilhando a minha resolução do exercício com uma solução que encontrei aqui no fórum para alterar o display no CSS. Como sugestão, acho que poderiam melhorar a "opinião do instrutor", pois não consegui reproduzir a solução que ele deu. Ficaria legal se incluisse o código dele do HTML e CSS também.

Mas vamos lá à minha solução para a proposta: HTML

<body>

  <button id="show">Exibir Aluratintas em estoque:</button>
  <button id="hide">Ocultar Aluratintas estoque</button>

  <ul data-lista 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>
</body>

O CSS na classe ".lista" adicionei "display: none" para que a lista só seja exibida com o click do usuário.

.lista {
  padding: 20px;
  display: none;
  list-style-type: none;
  border: 4mm ridge rgba(234, 122, 11, 0.992);
}

O JavaScript ficou assim:

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

document.querySelector("#show").addEventListener("click", () => {
  lista.style.display = "block";
});

document.querySelector("#hide").addEventListener("click", () => {
  lista.style.display = "none"
});
3 respostas
por Wanderson Alves Vieira
| 34k xp | 2 posts
Analista de gestão governamental - Desenvolvimento de sistemas

Muito bom, me ajudou muito. Vlw demais.

por Eduardo Torres Costa Vinagre
| 68.1k xp | 13 posts

Que bom que pude contribuir, Wanderson!

Postei a minha resolução aqui justamente para poder ajudar mais pessoas, pois vi que esse exercício deixou muita gente em dúvida e a solução não ficou muito didática.

Abraço!

por Flávio Lui
| 62.6k xp | 1 posts

Valeu man, ficou mto bom, deixei de um jeito que não precisasse de outro botão.

const lista = document.querySelector('ul');

 cont = 0;
document.querySelector('#mostrar').addEventListener('click', () => {
    cont = parseInt(cont + 1);

    if (cont%2 ){
        lista.style.display = 'block';

    } else {
        lista.style.display = 'none';
    }
    console.log(cont);
})