const html = document.querySelector("html");
const bt_foco = document.querySelector(".app__card-button--foco");
const bt_descansoCurto = document.querySelector(".app__card-button--curto");
const bt_descansoLongo = document.querySelector(".app__card-button--longo");
const botoes = document.querySelectorAll(".app__card-button");
const imagem = document.querySelector(".app__image");
const titulo = document.querySelector(".app__title");
function alterarContexto(contexto, obj) {
botoes.forEach((bt) => {
bt.classList.remove("active");
});
obj.classList.add("active");
html.setAttribute("data-contexto", contexto);
imagem.setAttribute("src", `/imagens/${contexto}.png`);
switch (contexto) {
case "foco":
titulo.innerHTML = `Otimize sua produtividade,<br />
<strong class="app__title-strong">mergulhe no que importa.</strong>`;
break;
case "descanso-curto":
titulo.innerHTML = `Que tal dar uma respirada?<br />
<strong class="app__title-strong">Faça uma pausa curta!</strong>`;
break;
case "descanso-longo":
titulo.innerHTML = `Hora de voltar à superfície.<br />
<strong class="app__title-strong">Faça uma pausa longa.</strong>`;
break;
}
}
bt_foco.addEventListener("click", () => {
alterarContexto("foco", bt_foco);
});
bt_descansoCurto.addEventListener("click", () => {
alterarContexto("descanso-curto", bt_descansoCurto);
});
bt_descansoLongo.addEventListener("click", () => {
alterarContexto("descanso-longo", bt_descansoLongo);
});
