<!DOCTYPE html>
<html>
<head>
<title>Fokus</title>
<style>
body[data-contexto="foco"] {
background-color: lightcoral;
}
body[data-contexto="descanso-curto"] {
background-color: lightgreen;
}
body[data-contexto="descanso-longo"] {
background-color: lightblue;
}
</style>
</head>
<body>
<h1 class="app__title"></h1>
<button id="botao-foco">Foco</button>
<button id="botao-descanso-curto">Descanso curto</button>
<button id="botao-descanso-longo">Descanso longo</button>
<script>
const body = document.body;
const titulo = document.querySelector('.app__title');
function alterarContexto(contexto) {
body.dataset.contexto = contexto;
if (contexto === 'foco') {
titulo.innerHTML = "Hora de focar!";
} else if (contexto === 'descanso-curto') {
titulo.innerHTML = "Descanso curto!";
} else if (contexto === 'descanso-longo') {
titulo.innerHTML = "Descanso longo!";
}
}
document.getElementById('botao-foco').addEventListener('click', () => {
alterarContexto('foco');
});
document.getElementById('botao-descanso-curto').addEventListener('click', () => {
alterarContexto('descanso-curto');
});
document.getElementById('botao-descanso-longo').addEventListener('click', () => {
alterarContexto('descanso-longo');
});
//Define o contexto foco como padrão quando a página é carregada.
alterarContexto('foco');
</script>
</body>
</html>
