Skip to content

Latest commit

 

History

11 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

📝 Todo App — JavaScript Vanilla

Badge Desenvolvido

Live Demo

Desenvolvido por JavaScript HTML5 CSS3 SPA Vanilla JS Frontend Arquitetura

Aplicação SPA (Single Page Application) de lista de tarefas (Todo App), desenvolvida em JavaScript puro, com foco em arquitetura limpa, separação de responsabilidades e boas práticas de desenvolvimento frontend.

O projeto foi estruturado para ser simples de entender, fácil de manter e escalável, simulando um cenário real de aplicação web.

🧩 Arquitetura SPA

Este projeto segue o conceito de Single Page Application (SPA), onde toda a interação acontece em uma única página HTML, com atualização dinâmica do conteúdo via JavaScript, sem recarregamento completo da página.

🚀 Demonstração

A aplicação está publicada via GitHub Pages e pode ser acessada em:

🔗 https://phmore.github.io/TodoList_Javascript/


📌 Funcionalidades

  • ✅ Criar tarefas
  • 🔁 Marcar e desmarcar tarefas como concluídas
  • 🔍 Filtrar tarefas:
    • Todas
    • A fazer
    • Concluídas
  • 🗑️ Apagar todas as tarefas (com confirmação)
  • 💾 Persistência de dados com localStorage
  • ⚠️ Feedback visual para erros e ações críticas

🛠️ Tecnologias Utilizadas

  • JavaScript (ES6+)
    • Modules (import / export)
    • Arrow Functions
    • Async / Await
  • HTML5
  • CSS3
  • Web Storage API (localStorage)
  • JSDoc
    • Documentação de funções
    • Tipagem implícita
    • Melhor suporte de IDE (VS Code)

⚠️ O projeto não utiliza frameworks ou bibliotecas externas, com o objetivo de reforçar os fundamentos do JavaScript.


🧠 Conceitos Aplicados

  • Separação de responsabilidades
  • Arquitetura em camadas
  • Programação modular
  • Delegação de eventos
  • Tratamento de erros
  • Código documentado e legível
  • Persistência de estado
  • Hidratação de estados

🗂️ Estrutura do Projeto

src/
│
├── index.js        # Ponto de entrada da aplicação (eventos e bootstrap)
├── actions.js     # Regras de negócio e orquestração
├── view.js        # Manipulação do DOM (interface)
├── state.js       # Estado volátil da aplicação
├── storage.js     # Persistência com localStorage
│
├── index.html
├── style.css

🚀 Considerações Finais

Este projeto foi desenvolvido com foco em aprendizado, boas práticas e organização de código, servindo como base para aplicações frontend maiores e mais complexas.

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages