Olá, apenas por curiosidade, estou seguindo as aulas e estudos desse curso, porem nessa aula, quando voltei depois de um dia tento trabalhado nele, o projeto simplesmente parou de funcionar no Chrome. Digo Chrome porque quando abro no Safari tudo ainda está perfeito, consigo adicionar tarefas, o botão de adicionar tarefas abre normalmente a textarea pra escrever a tarefa e inclusive o que foi aplicado nesse curso está funcionando. Porem, quando aberto no Chrome, nada funciona e o console retorna esse problema:
Uncaught SyntaxError: Unexpected token 'u', "function st"... is not valid JSON at JSON.parse () at script-crud.js:7:22 (anonymous) @ script-crud.js:7
Apontando para o seguinte trecho do código:
const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];
Já procurei o erro em relação ao arquivo do instrutor disponibilizado no github e até download mas não consegui encontrar o erro. Sendo assim, baixei o arquivo do projeto e rodei no meu vscode, quando abri um Live Server do projeto baixado tudo estava perfeito e funcionando perfeitamente no Live Server, então, comentei todo o meu código no meu arquivo, copiei e colei o código do arquivo do professor no meu, e ainda não funcionou.
Sendo assim, por curiosidade eu estou vindo aqui ver se alguem tem alguma idéia do que está acontecendo, se pode ser um problema do próprio Chrome, até porque no Safari o meu arquivo funciona perfeitamente, porem apenas o Chrome me passa esse erro no console, e não apenas o erro mas como nada funciona, nem se quer o textarea aparece quando clico no botão de adicionar tarefa.
Importante dizer que todos os campos foram adicionados no HTML e que o mesmo processo foi feito com o arquivo HTML pra ter certeza que ali não tinha problemas, e ainda insisto, no Safari tudo funciona perfeitamente.
Segue o código apenas pra confirmação:
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 btnCancelar = document.querySelector('.app__form-footer__button--cancel');
const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];
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 = `
<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');
botao.onclick = () => {
// debugger
const novaDescricao = prompt("Qual é o novo nome da tarefa?");
if(novaDescricao) {
paragrafo.textContent = novaDescricao;
tarefa.descricao = novaDescricao;
atualizarTarefas();
}
};
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);
atualizarTarefas();
textarea.value = '';
formAdicionarTarefa.classList.add('hidden');
});
tarefas.forEach(tarefa => {
const elementoTarefa = criarElementoTarefa(tarefa);
ulTarefas.append(elementoTarefa);
});