[Projeto] evoluindo cada vez mais

const html = document.querySelector('html');
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longBt = document.querySelector('.app__card-button--longo');
const botaoIniciar = document.querySelector('.app__card-primary-button');
const timer = document.querySelector('#timer');
const imagem = document.querySelector('.app__image');
const frase = document.querySelector('.app__title');
const duracaoFoco = 1500;
const duracaoDescansoCurto = 300;
const duracaoDescansoLongo = 900;

focoBt.addEventListener('click', () => {
        alterarContexto('foco');
})

curtoBt.addEventListener('click', () => {
        alterarContexto('descanso-curto');
})

longBt.addEventListener('click', () => {
        alterarContexto('descanso-longo');
})

function alterarContexto(contexto) {
        html.setAttribute('data-contexto', contexto)
        imagem.setAttribute('src', `/imagens/${contexto}.png`)
        switch (contexto) {
            case "foco":
                frase.innerHTML = `
                Otimize sua produtividade,<br>
                    <strong class="app__title-strong">mergulhe no que importa.</strong>
                `
                break;
            case "descanso-curto":
                frase.innerHTML = `
                Que tal dar uma respirada? <strong class="app__title-strong">Faça uma pausa curta!</strong>
                ` 
                break;
            case "descanso-longo":
                frase.innerHTML = `
                Hora de voltar à superfície.<strong class="app__title-strong"> Faça uma pausa longa.</strong>
                `
            default:
                break;
        }
    }