Desafio: Cambiando el color de fondo.

const html = document.querySelector('html');
const botonCorto = document.querySelector('.app__card-button--corto');
const botonEnfoque = document.querySelector('.app__card-button--enfoque');
const botonLargo = document.querySelector('.app__card-button--largo');

/* Empezar a Escuchar un evento que vaya a ocurrir, es este caso un click */
/* () => {} Arrow Funtion en JavaScript */

/* Cambiar el color del atributo data-contexto del html con el color establecido en css para el descansp-corto */
botonCorto.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-corto');
});

/* Cambiar el color del atributo data-contexto del html con el color establecido en css para el enfoque*/
botonEnfoque.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'enfoque');
});

/* Cambiar el color del atributo data-contexto del html con el color establecido en css para el decansp-largo*/
botonLargo.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-largo');
});