Boa tarde.
Segue minha resolução do exercicio.
focoBt.addEventListener('click', () => {
alterarContexto('foco')
});
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.<br>
<strong class="app__title-strong">Faça uma pausa longa.</strong>`
default:
break;
}
}
