Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Sugestão] Fiz de outra maneira

Referente ao curso JavaScript: explorando a manipulação de elementos e da localStorage, no capítulo Integrando com o cronômetro e atividade Desselecionando uma tarefa

por Bruno Barreto da Cunha Holanda
| 93.6k xp | 29 posts

Achei complexa a solução apresentada em aula, então tentei fazer de outra maneira mais simples. Segue abaixo:

li.onclick = () => {
        tarefaEmAndamento.textContent = tarefa.descricao; // atualiza o  campo "em andamento"
        const itemAtivo = ulTarefas.querySelector(".app__section-task-list-item-active"); //seleciona o <li> dentro da lista de tarefas que eu cliquei

        if (li.classList.contains("app__section-task-list-item-active")) { //condicional que verifica se o <li> que eu cliquei possui a classe "...-active"
            li.classList.remove("app__section-task-list-item-active");
            return;
        }

        itemAtivo?.classList.remove("app__section-task-list-item-active"); // faz a condicional para verificar se o <li> clicado possui um valor diferente de valores falsy, se sim, remove a classe "...-active"
        li.classList.add("app__section-task-list-item-active");
    };
3 respostas
por Luis Dias
| 3273.2k xp | 3596 posts
Developer PHP (⌐■_■)

Oi Bruno, tudo bem? 😊

Sua solução ficou bem interessante e mais concisa! 👍

Você conseguiu simplificar a lógica de seleção e desseleção da tarefa, utilizando classList.contains e o operador ?. para evitar erros.

Achei muito bacana a forma como você lidou com a remoção da classe app__section-task-list-item-active, tanto no item clicado quanto em outros itens que possam estar ativos. 👏

Essa abordagem demonstra um bom entendimento do DOM e das funcionalidades do JavaScript.

Continue explorando diferentes soluções e compartilhando suas ideias, isso é muito importante para o seu aprendizado e para a comunidade! 🤗

🎓 Para saber mais:

Nunca pare de aprender e experimentar! 💪

por Vinicios Neves
| 1008.8k xp | 1121 posts
Instrutor Tech Lead | Tech Educator

Salve, Bruno!

Que bacana ver você escrevendo seu próprio algorítimo.

Só tem uma coisa que eu não consegui perceber, que é limpar o texto da tarefa em andamento se a gente remover a seleção dela, no código que a gente fez no curso a gente faz assim:

        if (tarefaSelecionada == tarefa) {
            paragrafoDescricaoTarefa.textContent = '' // aqui
            tarefaSelecionada = null
            liTarefaSelecionada = null
            return
        }
solução!
por Bruno Barreto da Cunha Holanda
| 93.6k xp | 29 posts

Fala Vinícios!

realmente faltou. Eu adicionei essa funcionalidade. Mudei um pouco o código, pois apresentou um erro que eu estava com dificuldade em resolver

li.onclick = () => {
        tarefaEmAndamento.textContent = tarefa.descricao;
        const itemAtivo = ulTarefas.querySelector(".app__section-task-list-item-active");

        if (verificaSeClasseActiveExiste(li)) {
            li.classList.remove("app__section-task-list-item-active");
            tarefaEmAndamento.textContent = ""; 
            return;
        }

        if (itemAtivo) {
            removeClasseActive(itemAtivo);
        }
    
        li.classList.add("app__section-task-list-item-active");
    };