Lista de Tarefas
Uma lista de tarefas minimalista desenvolvida com HTML, CSS e JavaScript puros, marcando meus primeiros estudos de persistência de dados no navegador.
Sobre o Projeto
Construí esta lista de tarefas como um projeto prático para aplicar o que vinha aprendendo em JavaScript sobre manipulação do DOM e armazenamento local. A aplicação funciona de maneira bem direta: um espaço onde é possível anotar obrigações diárias e excluí-las à medida que forem cumpridas.
O maior objetivo desse exercício foi entender como dar vida a uma página da web, saindo dos layouts puramente visuais e estáticos para criar um sistema interativo básico que guarda as informações digitadas pelo usuário.
Organização do Código e Tecnologias
O projeto prioriza o uso de tecnologias nativas para manter o aprendizado focado nos pilares fundamentais da web. Na parte visual, decidi separar as propriedades CSS de maneira limpa: criei um arquivo main.css focado na estrutura principal para telas grandes e um arquivo mobile.css responsável exclusivo pelas regras de adaptação para smartphones.
Utilizado para capturar as entradas do teclado, criar dinamicamente os novos itens da lista no HTML e gerenciar o salvamento dos dados.
Responsável pela estrutura de formulário básica e pela marcação limpa do container onde as tarefas são inseridas.
Adotado para a criação do visual limpo, dividindo as regras estruturais e de responsividade em arquivos específicos para facilitar a organização.
Dificuldades Iniciais e Soluções
Durante a montagem das funções do script, os maiores desafios envolveram o tratamento de arrays e a correta sincronização entre o que era visto na tela e o que ficava guardado na memória.
Desafios Resolvidos
Salvar e carregar dados estruturados localmente
Por ser um dos meus primeiros contatos com armazenamento em cache no navegador, entender como salvar os textos sem perder as informações ao recarregar a página foi uma dificuldade inicial.
Implementei uma lógica que transforma o array de tarefas em texto usando 'JSON.stringify()' antes de salvá-lo. Ao iniciar a página, o script usa 'JSON.parse()' para ler esses dados de volta, garantindo que o usuário encontre suas notas salvas na próxima sessão.
Excluir elementos do HTML e do armazenamento ao mesmo tempo
Ao clicar no ícone de lixeira para apagar uma tarefa, era necessário garantir que o elemento sumisse visualmente da tela e que o registro correto também fosse apagado do banco local.
Organizei a criação de elementos vinculando um índice para cada tarefa. Ao acionar o evento de clique na lixeira, o código localiza a posição correta dentro do array principal, remove o registro via 'splice()', atualiza o localStorage e limpa a tela para renderizar a lista atualizada.
Conclusão
Este projeto de To-Do List foi muito importante para a minha evolução inicial no frontend, pois me deu clareza sobre como funciona o ciclo de vida de dados simples no cliente. Conseguir resolver problemas de conversão de dados e aplicar folhas de estilo separadas para a responsividade mobile me deu mais confiança para continuar criando páginas dinâmicas utilizando JavaScript.