Olá, Diego. Como vai?
Os seus exercícios estão excelentes e demonstram que você compreendeu muito bem os conceitos de manipulação do DOM e persistência de dados com o localStorage! Você utilizou estruturas fundamentais para qualquer pessoa que desenvolve no Front-end.
Vamos analisar as suas soluções com alguns complementos e boas práticas que vão deixar o seu código ainda mais robusto:
Exercício 1: Alternando visibilidade do formulário
A sua lógica utilizando o método classList.toggle("hidden") está perfeita! O toggle é a forma mais limpa e elegante de criar esse comportamento de "liga/desliga" para exibir ou ocultar elementos na tela.
- Pequena correção de sintaxe: Notei que você utilizou apenas
querySelector para declarar as variáveis. No JavaScript, precisamos indicar que esse método pertence ao objeto document. - Boas práticas: Para elementos do DOM que não serão reatribuídos, prefira usar
const em vez de let.
O código corrigido ficaria assim:
const botaoAdicionarTarefa = document.querySelector(".btn-add-task");
const formsAdicionarTarefa = document.querySelector(".form-add-task");
botaoAdicionarTarefa.addEventListener("click", () => {
formsAdicionarTarefa.classList.toggle("hidden");
});
Exercício 2: Criação de uma lista de tarefas interativa
Você mandou muito bem aqui! O uso do evento.preventDefault() é indispensável no evento de submit para evitar o recarregamento da página. Além disso, a conversão do array com JSON.stringify() antes de salvar no localStorage está corretíssima, já que o armazenamento local só aceita strings.
- Melhoria importante (A armadilha do array vazio): Do jeito que o código está, toda vez que a página for atualizada, a variável
listaDeTarefas será reiniciada como um array vazio ([]). Se o usuário adicionar uma nova tarefa, ela vai sobrescrever o que já estava guardado no localStorage.
Para resolver isso e fazer com que o aplicativo realmente lembre das tarefas antigas, o ideal é inicializar o array buscando o que já existe gravado no navegador, usando o JSON.parse():
const textarea = document.querySelector(".app__form-textarea");
// Se houver tarefas salvas, carrega elas. Se não, inicia um array vazio.
let listaDeTarefas = JSON.parse(localStorage.getItem("tarefas")) || [];
formsAdicionarTarefa.addEventListener("submit", (evento) => {
evento.preventDefault();
const tarefaAtualDoUsuario = {
descricaoTarefa: textarea.value,
};
listaDeTarefas.push(tarefaAtualDoUsuario);
localStorage.setItem("tarefas", JSON.stringify(listaDeTarefas));
textarea.value = ""; // Boa prática: limpa o campo de texto após o envio
});
Com esse pequeno ajuste de verificação inicial (|| []), o seu gerenciador de tarefas funcionará perfeitamente e manterá o histórico salvo mesmo se o navegador for fechado.
Parabéns pelo ótimo desempenho nos exercícios! Continue praticando.
Espero que possa ter lhe ajudado!
