Tarefa sem cor verde

Olá, Bruna! Como vai?

No código que você compartilhou, a cor verde é adicionada a uma tarefa quando o evento 'FocoFinalizado' é disparado. No entanto, quando você atualiza a página, o estado da tarefa é perdido, pois não está sendo armazenado de maneira persistente.

Para resolver isso, você precisa armazenar o estado de conclusão da tarefa no localStorage. No código da aula, a tarefa é marcada como concluída com selectedTask.complete = true e em seguida é chamada a função updateTasks(), que deve ser responsável por atualizar o estado das tarefas no localStorage.

No entanto, para que a tarefa continue verde após um refresh, você precisa verificar o estado de cada tarefa quando a página é carregada e adicionar a classe 'app__section-task-list-item-complete' às tarefas que estão marcadas como concluídas.

Aqui vai um exemplo de como você pode fazer isso:

window.onload = () => {
    const tarefas = JSON.parse(localStorage.getItem('tarefas')) || []
    tarefas.forEach((tarefa, index) => {
        if (tarefa.complete) {
            const liTarefa = document.querySelector(`#tarefa-${index}`)
            liTarefa.classList.add('app__section-task-list-item-complete')
            liTarefa.querySelector('button').setAttribute('disabled', 'disabled')
        }
    })
}

Neste exemplo, quando a página é carregada, recuperamos as tarefas do localStorage e para cada tarefa, verificamos se ela está concluída. Se estiver, adicionamos a classe 'app__section-task-list-item-complete' ao elemento li correspondente à tarefa e desabilitamos o botão. Note que estou assumindo que cada tarefa tem um id único na forma 'tarefa-index', onde index é a posição da tarefa na lista.

Espero que isso ajude você a resolver o problema! Se você tiver alguma dúvida sobre o código que compartilhei, fique à vontade para perguntar.

Espero ter ajudado e bons estudos!