FOKUS Lista de exercicios - Projeto final

Olá segue meu codigo finalizado.

let tarefas = JSON.parse(localStorage.getItem('tarefas')) || []
let tarefaSelecionada = null
let litarefaSelecionada = null
function atualizarTarefas() {
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
}
function criarElementoTarefa(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-list-item')

    const svg = document.createElement('svg')
    svg.innerHTML = `

    const paragrafo = document.createElement('p')
    paragrafo.textContent = tarefa.descricao
    paragrafo.classList.add('app__section-task-list-item-description')

    const botao = document.createElement('button')
    botao.classList.add('app_button-edit')

    botao.onclick = () => {
        //debugger
        const novaDescricao = prompt('Qual é o nome da nova tarefa?')
        //console.log('Valor obtido:', novaDescricao);
        
        if (!novaDescricao) {
            alert('Atualização da tarefa cancelada ou ínvalida!');
            return
        }
        paragrafo.textContent = novaDescricao
        tarefa.descricao = novaDescricao
        atualizarTarefas()
        alert('Tarefa atualizada com sucesso!');
    }
    const imagemBotao = document.createElement('img')
    imagemBotao.setAttribute('src', '/imagens/edit.png')
    botao.append(imagemBotao)
    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    if (tarefa.completa) {
        li.classList.add('app__section-task-list-item-complete')
        botao.setAttribute('disabled', 'disabled')
    } else{
        //Adicionando li ao DOM
        li.onclick = () => {
            // Remove o destaque de todas as tarefas
            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
}
BtnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden')
})
formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textArea.value
    }
    tarefas.push(tarefa)
    adicionarTarefaNaTela(tarefa)
    atualizarTarefas()
    limparFormulario()
})
const limparFormulario = () => {
    textArea.value = '';
    formAdicionarTarefa.classList.add('hidden');
}
btCancelar.addEventListener('click', limparFormulario);

tarefas.forEach(tarefa => {
    adicionarTarefaNaTela(tarefa)
});
function adicionarTarefaNaTela(tarefa) {
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
}
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')
        tarefaSelecionada.completa = true
        atualizarTarefas()
    }
})
const removerTarefas = (somenteCompletas)=> {
    // const seletor = somenteCompletas ? '.app__section-task-list-item-complete' : '.app__section-task-list-item' //(mesma coisa foi feita na linha de baixo)
    let seletor = '.app__section-task-list-item' // criando constante estabelecendo que se não forem completas vao ser removidas todas com essa 1º classe.
    if (somenteCompletas) {
        seletor = '.app__section-task-list-item-complete' // caso as tarefas foram completas somente serão deletadas as tarefas com essa classe.
    }
    document.querySelectorAll (seletor).forEach(elemento =>{ 
        elemento.remove()
    })
    tarefas = somenteCompletas ? tarefas.filter(elemento => !tarefa.completa) : [] //Se completas filtra se não array vazio.
    atualizarTarefas()
}
btnRemoverConcluidas.onclick = () => removerTarefas(true); //Remove somente as tarefas concluidas.
btnRemoverTodas.onclick = () => removerTarefas (false); // remove todas as tarefas.