[Projeto] Desafio Click | JavaScript: manipulando elementos no DOM

<!DOCTYPE html> <html> <head> <title>Fokus</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="botao-foco">Foco</button> <button id="botao-descanso-curto">Descanso curto</button> <button id="botao-descanso-longo">Descanso longo</button> <script src="script.js"></script> </body> </html> const botaoDescansoLongo = document.getElementById('botao-descanso-longo'); botaoDescansoLongo.addEventListener('click', () => { document.body.dataset.contexto = 'descanso-longo'; }); [data-contexto="descanso-longo"] { background-color: blue; }

Olá, Kevin. Tudo bem?

Muito obrigado por compartilhar o seu código aqui com a gente. Parabéns pelo trabalho. Continue com essa dedicação.

Ótimo como você utilizou o addEventListener para capturar o clique no botão e alterar o dataset do body. Isso deixa o código mais organizado e fácil de entender.

Uma dica interessante é utilizar classList para modificar estilos dinamicamente, o que pode facilitar a manutenção do código. Veja este exemplo:


const botaoFoco = document.getElementById('botao-foco');

botaoFoco.addEventListener('click', () => {
    document.body.classList.add('modo-foco');
});

Isso adiciona a classe modo-foco ao body, permitindo gerenciar estilos pelo CSS sem precisar manipular diretamente dataset.

Conte com o apoio do Fórum. Abraços e bons estudos!