Solucionado
Boa tarde, fiz de uma outra maneira para evitar repetição de código, usando a estrutura for! Gostaria de saber se está correto utilizar dessa forma:
const listaDeFundos = ['foco', 'descanso-curto', 'descanso-longo'];
const listaDeBotoes = document.querySelectorAll('.app__card-button');
for(let contador = 0; contador < listaDeFundos.length; contador++){
listaDeBotoes[contador].addEventListener('click', () =>{
html.setAttribute('data-contexto', listaDeFundos[contador]);
})
}
Oi Augusto!
Que bom que você está explorando maneiras de evitar a repetição de código! O uso da estrutura for para adicionar eventos aos botões parece uma abordagem eficiente e está correta.
A lógica que você usou está correta: você está iterando sobre as listas de fundos e botões simultaneamente, e atribuindo o data-contexto correspondente ao botão clicado, bacana que isso, permite facilmente adicionar mais botões e contextos, se necessário.
De maneira geral, meus parabéns por explorar o legal da programação, que é obter os mesmos resultados através de diferentes caminhos.
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!