Haga lo que hicimos: manipulando elementos

const music = new Audio('./sonidos/luna-rise-part-one.mp3');
const inputMusic = document.getElementById("alternar-musica");
const buttons = document.querySelectorAll('.app__card-button');

music.loop = true;
inputMusic.addEventListener('change', () => {
    if (music.paused) {
        music.play();
    } else {
        music.pause();
    }
});

buttonShort.addEventListener('click', () => {
    changeContext('descanso-corto');
    buttonShort.classList.add('active');
})

buttonFocus.addEventListener('click', () => {
    changeContext('enfoque');
    buttonFocus.classList.add('active');
})

buttonLarge.addEventListener('click', () =>{
    changeContext('descanso-largo');
    buttonLarge.classList.add('active');
})

function changeContext(contexto) {

    buttons.forEach(function(contexto) {
        contexto.classList.remove('active');
    });

    html.setAttribute('data-contexto', contexto);
    banner.setAttribute('src', `./imagenes/${contexto}.png`);

    switch (contexto) {
        case "enfoque":
            tittle.innerHTML = `
            Optimiza tu productividad,<br>
                <strong class="app__title-strong">sumérgete en lo que importa.</strong>`
            break;

            case"descanso-corto":
            tittle.innerHTML = `
            ¿Qué tal tomar un respiro? 
                <strong class="app__title-strong">¡Haz una pausa corta!</strong>`
            break;

            case"descanso-largo":
            tittle.innerHTML = `
            Hora de volver a la superficie
            <strong class="app__title-strong">¡Haz una pausa larga!</strong>`
            break;
        default:
            break;
    }
}