Refatoração e manipulação de elementos

Realizamos o proposto em aula!

const html = document.querySelector('html'); //seleciona o html
const focoBt = document.querySelector('.app__card-button--foco');//seleciona o botão foco
const curtoBt = document.querySelector('.app__card-button--curto');//seleciona o botrão curto
const longoBt = document.querySelector('.app__card-button--longo');//seleciona o botão descanso longo
const banner = document.querySelector('.app__image'); //seleciona as imagnes que tenho que trocar ao clicar nos botões
const titulo = document.querySelector('.app__title');

const temporizador = document.getElementsByClassName ('.app__card-primary-button-wrapper');
const imagens = document.getElementsByClassName('app__image');
const frases = document.getElementsByClassName('app__title');

console.log(temporizador, imagens, frases);

const botaoTemporizador = document.getElementById('start-pause');//puxei o id em vez da classe
const botaoFoco = document.getElementsByClassName('app__card-button--foco');
const botaoCurto = document.getElementsByClassName('app__card-button--curto');
const botaoLongo = document.getElementsByClassName('app__card-button--longo');

temporizadorFoco = 1500;
temporizadorCurto = 300;
temporizadorLongo = 900;

focoBt.addEventListener('click', () =>{
    /*html.setAttribute('data-contexto', 'foco');
    banner.setAttribute('src', '/imagens/foco.png'); // muda o atributo da imagem ao clicar*/
    alterarContexto('foco');
})//mudando atributo das páginas ao clicar no botão

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

})

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

function alterarContexto(contexto) {
    html.setAttribute('data-contexto', contexto)
    banner.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.
             <strong class="app__title-strong"> Faça uma pausa longa</strong>
            `
        default:
            break;
    }
}

function botao(botaoAcao, contexto) {
    botaoAcao.addEventListener('click', () =>{
        alterarContexto(contexto);
    })
}

botao(focoBt, 'foco');
botao(curtoBtBt, 'descanso-curto');
botao(longoBt, 'descanso-longo');