Este é o sétimo projeto utilizando JavaScript puro, desta vez desenvolvemos uma versão simplificada do google keeps, um anotador interativo.
O objetivo principal foi desenvolver um anotador interativo que facilite o gerenciamento de anotações, oferecendo as seguintes funcionalidades:
- Criação e Organização de Notas: Interface para criar, editar e salvar anotações no
localStorage, com opção de fixá-las no topo. - Salvar em Tempo Real: Alterações feitas diretamente nas notas são salvas em tempo real, garantindo que nenhum dado seja perdido.
- Pesquisa Dinâmica: Barra de busca para filtrar notas em tempo real, facilitando o acesso ao conteúdo.
- Duplicação e Exportação: Funções para duplicar anotações e exportá-las em formato CSV.
- Interação Intuitiva: Ícones para fixar, excluir e duplicar notas, com eventos de clique e suporte ao teclado, otimizando a usabilidade.
Com o desenvolvimento deste projeto, foram adquiridos os seguintes aprendizados:
- Manipulação de DOM: Criação e atualização de elementos HTML via JavaScript, incluindo o uso de
textareae ícones interativos. - Eventos de Interface Dinâmica: Utilização de cliques e teclas para adicionar, fixar, duplicar e excluir notas, mantendo a navegação fluida.
- Armazenamento Local (
localStorage): Persistência de dados para retenção entre sessões. - Exportação de Dados: Implementação de exportação em CSV para backup e acessibilidade.
- Duplicação de Notas: Uso de uma função aplicada para replicar conteúdo, facilitando a criação rápida de anotações similares.
- JavaScript
- HTML5
- CSS3
Este projeto está disponível para visualização on-line.
Você pode acessá-lo através do link: https://dev-notes-nine.vercel.app/
Este projeto foi desenvolvido como parte do curso Formação Front-end - HTML, CSS, JavaScript, React e +, ministrado por Matheus Battisti da Escola de Programação 🕒 Hora de Codar.