Não ta funcinando (emoji chorando) | JavaScript na Web: armazenando dados no navegador

Não sei no que eu errei, parece igual ao do professor.

const taskListContainer = document.querySelector(".app__section-task-list")

const formTask = document.querySelector(".app__form-add-task")
const toggleFormTaskBtn = document.querySelector(".app__button--add-task")
const formLabel = document.querySelector('.app__form-label')

const taskAtiveDescripiton = document.querySelector('.app__section-active-task-description')

const textArea = document.querySelector(".app__form-textarea")

const cancelarBtn = document.querySelector('.app__form-footer__button--cancel')

const localStorageTarefas = localStorage.getItem('tarefas')

let tarefas = localStorageTarefas ? JSON.parse(localStorageTarefas) : [];
const taskIconSvg = `
<svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24"
    fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="12" cy="12" r="12" fill="#FFF" />
    <path
        d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z"
        fill="#01080E" />
</svg>
`
let tarefaSelecionada = null
let itemTarefaSelecionada = null

let tarefaEmEdicao = null;
let paragrafroEmEdicao = null;

const selecionaTarefa = (tarefa, elemento) => {
    document.querySelectorAll('.app__section-task-list-item-active').forEach(function (button) {
        button.classList.remove('app__section-task-list-item-active')
    })
    if (tarefaSelecionada == tarefa) {
        taskAtiveDescripiton.textContent = null
        itemTarefaSelecionada = null
        tarefaSelecionada = null
        return
    }
    tarefaSelecionada = tarefa
    itemTarefaSelecionada = elemento
    taskAtiveDescripiton.textContent = tarefa.descricao
    elemento.classList.add('app__section-task-list-item-active')
}


const limparForm = () => {
    tarefaEmEdicao = null
    paragrafroEmEdicao = null

    textArea.value = ''
    formTask.classList.add('hidden')
}

const editarTarefa = (tarefa, elemento) => {
    if (tarefaEmEdicao == tarefa) {
        limparForm()
        return
    }

    formLabel.textContent = 'Editando tarefa'
    tarefaEmEdicao = tarefa
    paragrafroEmEdicao = elemento
    textArea.value = tarefa.descricao
    formTask.classList.remove('hidden')
}

function creatTask(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-list-item')

    const svgIcon = document.createElement('svg')
    svgIcon.innerHTML = taskIconSvg

    const paragraph = document.createElement('p')
    paragraph.classList.add('app__section-task-list-item-description')

    paragraph.textContent = tarefa.descricao

    const button = document.createElement('button')

    button.classList.add('app_button-edit')
    const editIcon = document.createElement('img')
    editIcon.setAttribute('src', '/imagens/edit.png')

    button.addEventListener('click', () => {
        evento.stopPropagation()
        editarTarefa(tarefa, paragraph)
    })

    li.onclick = () => {
        selecionaTarefa(tarefa, li)
    }

    svgIcon.addEventListener('click', (event) => {
        event.stopPropagation()
        button.setAttribute('disabled', true)
        li.classList.add('app__section-task-list-item-complete')
    })
    if (tarefa.concluida) {
        button.setAttribute('disabled', true)
        li.classList.add('app__section-task-list-item-complete')
    }

    li.appendChild(svgIcon)
    li.appendChild(paragraph)
    li.appendChild(button)

    button.appendChild(editIcon)

    return li
}
tarefas.forEach(task => {
    const taskItem = creatTask(task)
    taskListContainer.appendChild(taskItem)
})

toggleFormTaskBtn.addEventListener('click', () => {
    formLabel.textContent = 'Adicionando tarefa'
    formTask.classList.toggle('hidden')
})

cancelarBtn.addEventListener('click', () => {
    formTask.classList.add('hidden')
    limparForm()
})

const upadateLocalStorage = () => {
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
}

formTask.addEventListener('submit', (evento) => {
    evento.preventDefault()
    if (tarefaEmEdicao) {
        tarefaEmEdicao.descricao = textArea.value
        paragrafroEmEdicao.textContent = textArea.value
    } else{
    const task = {
        descricao: textArea.value,
        concluida: false
    }
    tarefas.push(task)
    const taskItem = creatTask(task)
    taskListContainer.appendChild(taskItem)
}

    upadateLocalStorage()
    limparForm()
})

Evento de Clique no Botão:
- No trecho do código onde você adiciona o evento de clique ao botão, você usa evento.stopPropagation(). No entanto, a variável evento não está definida como um parâmetro na função. Certifique-se de adicionar evento como um parâmetro na função.
```
button.addEventListener('click', (event) => {
    event.stopPropagation();
    selecionaTarefaParaEditar(tarefa, paragraph);
});
```
Problema na Função selecionaTarefaParaEditar:
- Certifique-se de que a função selecionaTarefaParaEditar está corretamente definida em algum lugar do seu código, pois não a vejo no trecho fornecido.

Problema no Formulário:

No evento de submit do formulário, você está usando textarea.value, mas a variável textarea não está definida. Parece que você quer usar textArea.value (note a diferença no caso).

formTask.addEventListener('submit', (evento) => {
    evento.preventDefault();
    if (tarefaEmEdicao) {
        tarefaEmEdicao.descricao = textArea.value;
        paragrafroEmEdicao.textContent = textArea.value;
    } else {
        const task = {
            descricao: textArea.value,
            concluida: false
        }
        tarefas.push(task);
        const taskItem = createTask(task);
        taskListContainer.appendChild(taskItem);
    }
    updateLocalStorage();
    limparForm();
});

Corrija esses pontos e veja se o código começa a funcionar conforme esperado.

Mergulhe em programação