Outra forma de se fazer

Tentei fazer sozinho antes de assistir o vídeo e o que me veio em mente foi seguir a mesma lógica das aulas anteriores. Todavia, gostaria de receber um feedback diante da minha solução.

Segue abaixo o código:

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.getElementById('titulo')



focoBt.addEventListener('click', () => {
    alterarContexto('foco', `<h1 class="app__title" id="titulo">
                            Otimize sua produtividade,<br>
                            <strong class="app__title-strong">mergulhe no que importa.</strong>
                            </h1>`)


})

curtoBt.addEventListener('click', () => {
    alterarContexto('descanso-curto', `<h1 class="app__title" id="titulo">
                                        Que tal dar uma respirada?<br>
                                        <strong class="app__title-strong">Faça uma pausa curta!</strong>
                                        </h1>`)


})

longoBt.addEventListener('click', () => {
    alterarContexto('descanso-longo', `<h1 class="app__title" id="titulo">
                                        Hora de voltar à superfície.<br>
                                        <strong class="app__title-strong">Faça uma pausa longa.</strong>
                                        </h1>`)

})


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


}