Entrar Ainda não tem acesso?
1
resposta

[Projeto] Desafio Click

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Iniciando o projeto Fokus e atividade Desafio: adicionando evento de click

por KEVIN SILVA LOPES
| 22.2k xp | 36 posts
<!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;
}
1 resposta
por Renan Lima
| 3960.3k xp | 8426 posts
Alura Scuba Team Apoio Educacional - Alura

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!