Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resolução Alterar os textos

Criei uma lista de objetos com chaves e valores, referente valor de cada atributo data, implementei na função handleClick, assim apropria função cria a mudança de acordo com [data]:

/* ------ Variavel pega o titulo ------ */

const title = tag('.app__title');

/* ------ Variavel Objeto que armazena os textos ------ */

const texts = {
    'foco': `Otimize sua produtividade,<br>
    <strong class="app__title-strong">Mergulhe no que importa.</strong>`,
    'descanso-curto': ` Que tal dar uma respirada? ,<br>
    <strong class="app__title-strong">Faça uma pausa curta!</strong>`,
    'descanso-longo': `Hora de voltar à superfície ,<br>
    <strong class="app__title-strong">Faça uma pausa Longa!</strong>`
}

/* ------ Função que controla o evento e iterage com os elementos ------ */

function handleClick (target, tag, data, image) {
    target.addEventListener('click', () => {
        tag.setAttribute('data-contexto', data);
        banner.setAttribute('src', image);

        // passando valores como objetos usando [data]

        title.innerHTML = texts[data] || title.innerHTML;

        buttons.forEach((item) => {
            if (item === target) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }           
        });      
    });
1 resposta
solução!

Olá Lucas! Tudo bem?

Que bacana a sua abordagem! Você fez o que foi proposto seguindo a sua própria lógica, isso é muito bom para exercitar seu olhar crítico no momento de criar suas soluções. Recomendo que dê uma olhada no gabarito disponibilizado pelo instrutor, para que aprenda diferentes abordagens de solução e aumente seu repertório de conhecimentos.

Obrigada por compartilhar sua solução com a gente. Conte sempre com o apoio do fórum!

Um abraço e bons estudos!