Olá, tudo bem?
Ainda fiquei com dúvida como resolver, gostaria de entender melhor o funcionamento e a lógica utilizada.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá, tudo bem?
Ainda fiquei com dúvida como resolver, gostaria de entender melhor o funcionamento e a lógica utilizada.
Boa tarde! Tudo bem? Pode informar qual seria a dúvida por gentileza? Fico aguardando seu retorno! :)
Fiquei em dúvida como posso resolver, mesmo tendo a resposta do professor. Gostaria de saber como posso solucionar de forma mais detalhada.
Brigado pelo retorno, Alberinando!
Do primeiro bloco de código:
A const lista, serve para referenciar a ul, utilizando o método querySelector.
A segunda linha do código faz a mesma coisa, só que referenciando o botão, com o id botao, e criando um evento de clique.
Poderia escrever também parecido com a linha de cima, da seguinte forma:
const botao = document.querySelector("#botao")
botao.addEventListener("click", () => {
Dentro do método addEventListener, é passado o que deve acontecer com o clique. Que é alterar algum atributo, com o método setAttribute, de "data-lista", para "mostrar".
Esses são os data attributes no arquivo CSS:
`[data-lista="mostrar"] { display: block; }
[data-lista="esconder"] { display: none; }`
Do segundo bloco de código:
Faz a mesma coisa, só que clicando no botão com a classe "close".
Detalhe importante, para passar o que deve "acontecer", é muito comum unir arrow function + métodos da linguagem. Como no exemplo acima.
Consegui ajudar em sua dúvida? Caso ainda persista, pode me informar por favor?
E se consegui ajudar, pode marcar o tópico como respondido por favor?
Bons estudos! :)
Vou ser sincero: Faltou sobre os data-attributes. Me matei no exercício, acabei chegando ao resultado de outra forma (modificando o texto com innerText), mas ao consultar a resposta do exercício, faltou o que você adicionou no CSS e faltou também as alterações que foram feitas no HTML. Seria melhor se trouxesse essas informações na resposta do exercício, não apenas o código JS. Fora que, nessa altura do curso, ainda não foi ensinado a respeito de data-attributes e eu não fazia ideia de como manipular os data-attributes pelo CSS. Enfim, consegui aprender, mas bem bagunçado essa parte...
Olá, Jair. Como vai?
Obrigado pelo seu feedback, dicas para melhorar o conteúdo são sempre bem-vindas! :)
Eu vou deixar na resposta do exercício, a explicação que havia dado ao aluno nesse tópico.
Sobre a explicação sobre "data-attributes", nessa mesma, aula possui um conteúdo extra explicando sobre ele, e também um exercício de múltipla escolha, antes desse exercício de desafio ao final da aula.
Caso surjam mais dúvidas, pode contar com a gente!
Bons estudos! :)