Olá, tudo bem?
Ainda fiquei com dúvida como resolver, gostaria de entender melhor o funcionamento e a lógica utilizada.
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! :)