Solucionado
Eu não entendi muito bem a lógica do contexto.classList.remove('active');
Na minha interpretação o parâmetro para remoção da classe 'active' seria o do botão correspondente ex: Se eu uso o focoBt (no qual o contexto se torna o 'foco'), a classe 'active' deveria ser removida do botão do Foco.
Pq, então, a classe é removida dos outros?
Acho que é uma dúvida boba e de interpretação, mas realmente fiquei confuso nessa parte
Oi, Igor, tudo bem?
A lógica do contexto.classList.remove('active') é remover a classe active de todos os botões antes de adicionar a classe active ao botão correspondente. Isso é feito para garantir que apenas um botão fique ativo por vez.
Por exemplo, se você clicar no botão "Foco", a classe active será removida dos botões "Descanso curto" e "Descanso longo" para que apenas o botão "Foco" fique ativo. Essa lógica é aplicada para todos os botões, garantindo que apenas um deles tenha a classe active em determinado momento.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Olá, Igor. Cara, eu fiquei com a mesmissíma dúvida e só fui entender depois de quebrar a cabeça. A confusão começa pois usamos a palavra contexto como parâmetro que é passado para a função 'alterarContexto' indicando qual botão foi clicado, e em seguida, usamos o mesmo nome no forEach. Parece que estamos passando o mesmo parâmetro em ambos os casos, mas não. No Caso do forEach, a palavra "contexto" se refere ao elemento em si. Ou seja, o Elemento da lista que o ForEach percorreu. Como o ForEach percorre toda a lista, ele vai indo de elemento em elemento e removendo a classe "active".
Faz o teste, dentro do forEach muda a palavra contexto para outra qualquer. O resultado vai ser o mesmo pois a palavra que está ali é simplesmente uma referência ao elemento da lista.
Bom, pelo menos isso foi o que entendi e que fez sentido pra mim. Espero ter ajudado.
Também tive essa dúvida. O que iria solucionar isso seria utilizar um outro nome diferente de "contexto", como "botao". Assim, ficaria explícito que não tem nada a ver com o parâmetro da função, como no teste que eu fiz:
botoes.forEach(botao => {
botao.classList.remove('active');
});
fiquei confusa também, mas depois que entendi achei mais fácil chamar ele de elemento ou indice
function alterarContexto (contexto) {
botoes.forEach(function (elementoDaLista){
elementoDaLista.classList.remove('active')
})