[Dúvida] Código JS para ativar borda branca na lista de tarefas não está funcionando.

Ao fazer alguns testes comentei o código CSS original do projeto e criei outro com algumas alterações para ver o resultado: Neste caso eu deixei a classe ".app__section-task-list-item" ao lado da classe que criei (".bordaBranca") ao qual levou ao mesmo resultado.

/* .app__section-task-list-item-active .app__section-task-list-item {
    border: 2px solid #FFF;
} */

.bordaBranca .app__section-task-list-item {
    border: 10px solid #00F4BF;
}

Na segunda tentativa, resolvi retirar esta classe (.app__section-task-list-item) e deixar somente a .bordaBranca ao qual deu o resultado positivo, isto é: ao clicar sobre a lista, a borda apareceu com a referida cor.

/* .app__section-task-list-item-active .app__section-task-list-item {
    border: 2px solid #FFF;
} */

.bordaBranca {
    border: 10px solid #00F4BF;
}

Por enquanto, acabei deixando a classe ".app__section-task-list-item" comentada para poder a utilizar a classe da borda:

.app__section-task-list-item-active /*.app__section-task-list-item*/ {
    border: 2px solid #FFF;
}

li.onclick = () => {
        li.classList.add('app__section-task-list-item-active')
        taskParagraphDescription.textContent = task.description
    }

Desta forma o resultado deu certo, mas mesmo assim gostaria de encontrar o que há de diferente do meu código para com o do instrutor e realizar as corretas alterações, para chegar ao mesmo resultado.

Olá, Uelinton!

Se eu entendi bem, parece que o problema pode estar na ordem em que as classes são adicionadas ao elemento li. Na versão original do código do instrutor, a classe app__section-task-list-item-active é adicionada primeiro, seguida pela classe app__section-task-list-item. No seu código, parece que você está adicionando a classe app__section-task-list-item-active depois de atualizar o conteúdo do parágrafo (taskParagraphDescription.textContent = task.description).

A ordem das operações pode afetar o resultado, especialmente se houver estilos CSS específicos para a classe app__section-task-list-item-active que estão sendo anulados ou sobrepostos por estilos de outras classes.

Espero ter ajudado e 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!

Olá, obrigado por sua ajuda.

Desculpa se não compreendi o que você afirma, mas você diz que meu código deveria estar desta forma?

li.onclick = () => {
        taskParagraphDescription.textContent = task.description
        li.classList.add('app__section-task-list-item-active')
    }

Aliás, hoje revi todo meu código, tirando como base o código do instrutor, comentei códigos que fiz que achava que poderia ser o erro e reescrevi todo o código da borda de novo seguindo novamente os passos do instrutor. E conforme fui testando, fui desfazendo os códigos comentados e por incrível que pareça, não apareceu nenhum erro. Queria muito ter achado algo pra aprender e realmente só fiquei mais intrigado.

Oi Uelinton! Tudo bem?

A classe também não estava funcionando aqui, fui olhar o fórum e acabei vendo a tua publicação. No meu caso, quando eu olhei o CSS, inventei de colocar um "espacinho" entre a primeira classe e o ponto... (nesse lugar que eu marquei aí para você ver...) .app__section-task-list-item-activeXX.app__section-task-list-item { border: 2px solid #FFF; }

depois eu removi o espacinho e tudo deu certo, mas fiz alguns testes antes como o sugerido por você mesmo... Pode ser que você também tenha feito algo assim como eu fiz e por isso o erro, daí quando voltou tudo funcionou...

Sobre teu último comentário, realmente... Vira a mexe as coisas vão se resolver e te deixar mais intrigado ainda, as vezes é só uma letrinha, uma coisinha de nada e a gente "perde" um tempão... Faz parte da vida de um dev, com o tempo você começa a pegar prática nesses pequenos "lapsos" e ir atrás deles. Aproveita que ficou intrigado para se motivar a seguir. :)

Também tive o mesmo problema. Tentei as soluções que eu vi aqui, só que não adiantou..