Exercício - refatoração e manipulação de elementos

A minha solução foi um pouco diferente da feita pelo instrutor. Eu criei uma variável texto e armazenei nela os texto dos títulos.

Adicionei mais parâmetro (texto) a função alteraContexto e atribui a variável criada a variável titulo via o método innerHTML.

const html = document.querySelector('html');
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');
const banner = document.querySelector('.app__image');
**const titulo = document.querySelector('.apptitle');**

focoBt.addEventListener('click', () => {
    **const texto = `Otimize sua produtividade,<br>
    <strong class="apptitle-strong">mergulhe no que importa.</strong>`;**
    alterarContexto('foco',**texto**);
    
})

curtoBt.addEventListener('click', () => {
    **const texto = `Que tal dar uma respirada?
    <br><strong class="apptitle-strong">Faça uma pausa curta!.</strong>`;**
    alterarContexto('descanso-curto',**texto**);
})

longoBt.addEventListener('click', () => {
    **const texto = `Hora de voltar à superfície.<br>
    <strong class="apptitle-strong">Faça uma pausa longa.</strong>`;**
    alterarContexto('descanso-longo',**texto**);
})

function alterarContexto(contexto,**texto**) {
    html.setAttribute('data-contexto', contexto);
    banner.setAttribute('src', `/imagens/${contexto}.png`);
    **titulo.innerHTML = texto;**
}