Como de costume, eu tento implementar a solução do meu jeito sem assistir o vídeo. Como eu não sabia que o instrutor iria alterar de const para let, eu fiz dessa forma:
const listaDeTarefas = JSON.parse(localStorage.getItem('tarefas')) || [];
...
function limparTarefasConcluidas() {
const tarefasRemovidas = listaDeTarefas.filter((tarefa) => !tarefa.completa) //filtra o array de tarefas para somente conter as tarefas nao concluidas
listaDeTarefas.splice(0, listaDeTarefas.length, ...tarefasRemovidas); //substitui o conteúdo da lista de tarefas
return listaDeTarefas;
}
function renderizaLista() { //talvez essa nao seja a forma mais correta de fazer, mas aqui eu limpo a lista e reconstruo com as tarefas que sobraram
ulTarefas.innerHTML = '';
listaDeTarefas.forEach((tarefa) => {
ulTarefas.append(criarElementoListaDeTarefas(tarefa));
})
btnApagarTarefasConcluidas.addEventListener('click', () => {
limparTarefasConcluidas();
atualizarTarefas();
renderizaLista();
});
Assim eu nao alterei a declaração da variável e consegui ter o resultado esperado.
então o fluxo ficou
1- função que limpa as tarefas
2- atualiza a localStorage
3- Atualiza o dom
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!