Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Projeto] Código final dessa atividade

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Iniciando o projeto Fokus e atividade Alterando data attributes

por Luis Designer
| 360k xp | 274 posts
Designer Gráfico

Segue abaixo o código final caso alguém precise:

const html = document.querySelector('html')
const focoBt = document.querySelector('.app__card-button--foco')
const curtoBt = document.querySelector('.app__card-button--curto')
const longoBt = document.querySelector('.app__card-button--longo')

focoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'foco')
})
curtoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-curto')
})
longoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-longo')
})

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
2 respostas
por Ronaldo Cordeiro Schmidt
| 131.8k xp | 393 posts

Perfeito amigo.
Parabéns.
Nesse ritmo o sucesso é garantido!
Continue praticando e compartilhando seu conhecimento.
Obrigado.
Bons estudos.

Apenas uma observação :
Manipular o "html" ou o "body" diretamente com setAttribute ou qualquer outro metodo pode ser uma prática não recomendada, especialmente se o objetivo for alterar o estilo ou o comportamento da interface do usuário (UI).
Isso ocorre porque mexer diretamente nesses elementos pode afetar toda a página, tornando a manutenção mais difícil e o comportamento inesperado em alguns casos.
Uma abordagem mais comum e segura seria modificar um contêiner mais específico, como uma div ou um section, que pode ser mais controlado e limitado ao contexto que você deseja modificar.
Qualquer duvida pode perguntar.
Ficarei feliz se puder ajudar.
Bons estudos.

solução!
por Rafaela Petelin Silvério
| 1378.7k xp | 3110 posts
Alura Scuba Team

Oi, Luis! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura e ajudar outros estudantes!

O resultado ficou ótimo, você aplicou bem o uso dos data-attributes para alterar o contexto do app. Isso mostra domínio na manipulação do DOM com eventos de clique e atualização de atributos.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!