[Dúvida] Não aparece nada quando clico na "Lista de tarefas" no meu projeto

Olá, Yago, como vai?

Existe um ponto no seu código que impede o funcionamento do formulário. No início do script você declarou a constante com o nome textArea, utilizando A maiúsculo:

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

No entanto, dentro do submit você está acessando textarea.value, com a minúsculo:

const tarefa = {
descricao: textarea.value
}

Como JavaScript é case sensitive, textArea e textarea são variáveis diferentes. Nesse caso, textarea não existe, o que gera um erro no momento do submit e interrompe a execução do restante do script. Quando ocorre esse erro, os próximos trechos deixam de funcionar, inclusive a exibição das tarefas.

Ajuste o trecho para utilizar exatamente o mesmo nome da variável declarada:

const tarefa = {
descricao: textArea.value
}

Esse tipo de detalhe é comum quando começamos a manipular DOM e eventos. Sempre que algo “para de funcionar”, vale abrir o DevTools do navegador, ir na aba Console e verificar se há algum erro em vermelho, como por exemplo “textarea is not defined”.

Depois de corrigir isso, a funcionalidade de adicionar e exibir tarefas deve voltar a operar normalmente.

Se continuar com alguma dificuldade, compartilhe o erro exibido no console que analisamos juntos. O fórum segue à disposição.

Abraços :)

Realmente, não tinha percebido que estavam diferentes, obrigado por me explicar inclusive. Porem ainda não consigo usar o botão "Adicionar nova tarefa", continua não acontecendo nada.

Aqui está o codigo atualizado, tirando o erro do "textArea e textarea"

const btnAdicionarTarefa = document.querySelector('.app__button--add-task')
const formAdicionarTarefa = document.querySelector('.app__form-add-task')
const textArea = document.querySelector('.app__form-textarea')
const ulTarefas = document.querySelector('.app__section-task-list')

const tarefas = JSON.parse (localStorage.getItem('tarefas')) || [];

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

    const svg = document.createElement('svg')
    svg.innerHTML = `
        <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"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
        </svg>
    `
    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')

    const imagemBotao = document.createElement('img')
    imagemBotao.setAttribute('src', '/imagens/edit.png')
    botao.append(imagemBotao)

    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    return li
}

btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden')
})

formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textArea.value
    }
    tarefas.push(tarefa)
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
    textArea.value = ''
    formAdicionarTarefa.classList.add('hidden')
})

tarefas.forEach(tarefa => {
   const elementoTarefa = criarElementoTarefa(tarefa)
   ulTarefas.append(elementoTarefa)
});

Oi, Yago.

Testei o código e aqui funcionou corretamente. Você poderia me enviar uma imagem do console do seu navegador? Pode ser que tenha alguma mensagem de erro lá que nos ajude a descobrir o que está acontecendo. Se possível também, suba seu projeto no GitHub e me envie o link do repositório, assim posso ter acesso a todo o código e tentar reproduzir o problema por aqui.

Fico no aguardo e a disposição :)

Aqui esta o link do repositório do projeto: https://github.com/yagooxvz/Projeto-Fokus

(não consegui inserir a imagem aqui no chat, então vou por em escrito o erro que aparece)

erro 1:
"VM183:1 Uncaught SyntaxError: "[object Object]" is not valid JSON
at JSON.parse ()
at script-crud.js:6:22
(anónimo) @ script-crud.js:6"

erro 2: "WebSocket connection to 'ws://localhost:8081/' failed: "

Oi, Yago.

O erro que você está recebendo indica que o que está salvo na chave tarefas do localStorage não está em formato JSON válido. Quando o código executa esta linha:

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];

O JSON.parse tenta converter o valor salvo em objeto JavaScript. Porém, se em algum momento foi salvo algo como um objeto direto, sem usar JSON.stringify, o navegador acaba armazenando a string "[object Object]". Essa string não é um JSON válido, e por isso o parse quebra logo no carregamento do script, impedindo todo o restante de funcionar.

Para confirmar, abra o DevTools, vá até a aba Application (ou Armazenamento), acesse Local Storage e verifique o valor da chave tarefas. Se estiver algo como [object Object], esse é o motivo do erro.

Você pode resolver limpando manualmente o localStorage pelo próprio DevTools, usando a opção de limpar a chave específica.

No gif não apareceu, mas o que eu fiz foi clicar com o botão direito do mouse no que foi salvo e cliquei na opção de excluir. Pode haver pequenas mudanças nos nomes das opções dependendo no navegador que você estiver usando, mas no geral os passos são bem parecidos.

Sigo a disposição :)