Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

FOKUS Lista de exercicios

Olá segue a lista de exercicios.

    li.onclick = () => {
        
        document.querySelectorAll('.app__section-task-list-item-active')
        .forEach(elemento =>{
            elemento.classList.remove('app__section-task-list-item-active')
        })
        
       if (tarefaSelecionada == tarefa) {
        paragrafoDescricaoTarefa.textContent = ''
        tarefaSelecionada = null
        litarefaSelecionada = null
        return
       }
        tarefaSelecionada = tarefa
        litarefaSelecionada = li
        paragrafoDescricaoTarefa.textContent = tarefa.descricao
        li.classList.add('app__section-task-list-item-active')
    }

    return li
} 

document.addEventListener('FocoFinalizado', ()=>{
    console.log('Tarefa de foco finalizada!');
    if (tarefaSelecionada && litarefaSelecionada) {
        litarefaSelecionada.classList.remove('app__section-task-list-item-active')
        litarefaSelecionada.classList.add('app__section-task-list-item-complete')
        litarefaSelecionada.querySelector('button').setAttribute('disabled','disabled')
    }
})

1 resposta

Oi, Stephanie. Tudo bem com você?

Obrigado por compartilhar sua resolução da lista de exercícios. O código atende aos requisitos propostos para a alternância entre tarefas ativas e para o tratamento do evento customizado. A lógica de remover a classe da tarefa anteriormente selecionada antes de destacar a nova garante que apenas uma tarefa permaneça ativa por vez. Além disso, a verificação if (tarefaSelecionada == tarefa) permite desselecionar a mesma tarefa quando ela é clicada novamente, o que está de acordo com o enunciado da atividade.

Na implementação do evento FocoFinalizado, também está correta a validação de tarefaSelecionada e litarefaSelecionada antes de marcar a tarefa como concluída. A adição da classe de conclusão e a desativação do botão de edição representam bem a mudança de estado esperada. Como dica, em projetos maiores é comum também atualizar o objeto da tarefa, por exemplo definindo uma propriedade como tarefa.completa = true, e persistir essa alteração na localStorage, garantindo que o status permaneça salvo mesmo após recarregar a página.

Parabéns pelo desenvolvimento da atividade e por compartilhar sua solução. Continue praticando e trazendo suas implementações para o fórum. A comunidade está à disposição para ajudar no que precisar.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!