A professional-grade, full-featured task management application built with zero dependencies and zero build tools — pure vanilla HTML, CSS, and JavaScript. Features a real-time analytics dashboard with circular progress bar, interactive charts, dark mode, and a fully responsive design from desktop to mobile.
Live Demo · Documentation · Report Bug · Request Feature
|
Light Mode |
Dark Mode |
Zero Dependencies No npm, no node_modules, no webpack. Open index.html and it just works.
|
Fully Responsive 4 breakpoints: desktop, tablet, mobile, small mobile. Pixel-perfect at every size. |
Real-Time Analytics Circular progress bar, weekly activity chart, and task distribution doughnut. |
Dark Mode One-click theme toggle with smooth transitions. Preference saved to localStorage. |
- Create tasks with a priority level (Low / Medium / High)
- Complete tasks with animated checkbox and strikethrough effect
- Delete tasks with smooth slide-out animation
- Batch clear all completed tasks at once
- Persistent storage — tasks survive page refresh via localStorage
- Circular SVG progress bar — gradient ring (indigo-to-cyan) with animated fill, showing completion percentage in real-time
- Stat cards — Total, Done, and Pending counts with color-coded icons
- Weekly activity bar chart — tasks completed per day for the last 7 days (Chart.js)
- Task distribution doughnut chart — visual split of completed vs. pending tasks
- Real-time search — instant text filtering as you type
- Status filter — All Tasks / Active / Completed
- Priority filter — All / High / Medium / Low
- Filters combine seamlessly (e.g., search "report" + status "active" + priority "high")
- Dark mode with one-click toggle and persistent preference
- 4 responsive breakpoints (desktop > tablet > mobile > small mobile)
- Sticky sidebar on desktop so the dashboard stays visible while scrolling tasks
- Smooth animations — slideIn, slideOut, shake validation, hover micro-interactions, check pop
- Accessible — semantic HTML, ARIA labels, keyboard-friendly
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure, SVG graphics, ARIA accessibility |
| CSS3 | Custom Properties (theming), CSS Grid, Flexbox, keyframe animations |
| JavaScript ES6+ | State management, DOM rendering, event delegation |
| Chart.js 4.x | Bar chart and doughnut chart (loaded from CDN) |
| Google Fonts | Inter typeface (weights 300–800) |
| localStorage API | Client-side data persistence |
| SVG | Circular progress bar, all inline icons |
No build tools. No npm. No webpack. No transpilation. The code runs directly in the browser as-is.
+=====================+
| index.html |
| (349 lines) |
+=========+==========+
|
+--------------+--------------+
| |
+--------v--------+ +--------v--------+
| css/style.css | | js/app.js |
| (1,077 lines) | | (512 lines) |
+-----------------+ +---+----+----+---+
| | |
+--------+ +-+ +-+-------+
| | |
+-----v---+ +-----v----+ +------v-----+
| DOM API | | Storage | | Chart.js |
+---------+ +-----+----+ +------------+
|
+------v------+
| localStorage|
+-------------+
Every user action follows the same unidirectional pattern:
User Action --> Event Handler --> State Mutation --> Save --> Re-render
(click) (handleAddTask) (todos.unshift) (saveTodos) (render)
Each task is stored as a rich object:
{
"id": "m2abc1234xyz",
"text": "Finish quarterly report",
"completed": true,
"priority": "high",
"createdAt": "2026-02-07T09:30:00.000Z",
"completedAt": "2026-02-08T14:22:00.000Z"
}| Field | Type | Description |
|---|---|---|
id |
string |
Unique identifier (base36 timestamp + random) |
text |
string |
Task description (HTML-escaped on render) |
completed |
boolean |
Completion state |
priority |
string |
"low" | "medium" | "high" |
createdAt |
string |
ISO 8601 creation timestamp |
completedAt |
string|null |
ISO 8601 completion timestamp (drives weekly chart) |
taskflow-project/
├── index.html # Single-page application (349 lines)
├── css/
│ └── style.css # Full stylesheet with dark mode (1,077 lines)
├── js/
│ └── app.js # Application logic & charts (512 lines)
├── assets/
│ ├── images/
│ │ └── check.png # Legacy asset (preserved for git history)
│ └── icons/
│ ├── icon-192.png # PWA icon (192×192)
│ └── icon-512.png # PWA icon (512×512)
├── manifest.webmanifest # PWA manifest (name, icons, theme)
├── sw.js # Service worker (offline cache)
├── docs/
│ └── TaskFlow_Architecture.pdf # 27-page architecture documentation
├── generate_docs.py # PDF documentation generator script
├── .gitignore
└── README.md # You are here
Total: ~1,940 lines of hand-written code across 3 core files.
# 1. Clone the repository
git clone https://github.com/danialeyz/todolist-project.git
cd todolist-project
# 2. Open in browser (pick one)
start index.html # Windows
open index.html # macOS
xdg-open index.html # Linux
# Or use any local server:
npx serve .
# or
python -m http.server 8000That's it. No
npm install. No build step. No configuration. Just open and use.
TaskFlow is a Progressive Web App (PWA). To install it on your iPhone:
- Serve the app over HTTPS (required for Add to Home Screen). For example:
- Deploy to GitHub Pages, Netlify, or any static host, or
- Run a local server:
npx serve .orpython -m http.server 8000and use a tunnel (e.g. ngrok) if testing on your phone.
- Open the app in Safari on your iPhone.
- Tap the Share button (square with arrow).
- Tap Add to Home Screen.
- Name it (e.g. "TaskFlow") and tap Add.
The app will open in standalone mode (no browser UI) and use the TaskFlow icon. A service worker caches the app for faster loads and basic offline support.
TaskFlow is static (HTML, CSS, JS, assets). Deploy the project root to any static host.
| Check | Notes |
|---|---|
| HTTPS | Required for service worker and PWA install. All hosts below use HTTPS. |
| Root or subpath | Works at https://domain.com/ or https://domain.com/repo/. All paths are relative. |
| Files to upload | index.html, manifest.webmanifest, sw.js, css/, js/, assets/ (and optionally docs/, README.md). |
| No server config | No redirects or headers needed. Optional: serve manifest.webmanifest as Content-Type: application/manifest+json. |
Suggested hosts: GitHub Pages, Netlify, Vercel, Cloudflare Pages. Drag-and-drop the folder or connect the repo; no build step.
The application adapts across 4 breakpoints with a desktop-first approach:
| Breakpoint | Target | Layout | Key Adaptations |
|---|---|---|---|
| > 1024px | Desktop | Sidebar + Main grid | Sticky sidebar, full button labels, hover delete |
| 768–1024px | Tablet | Single column | Sidebar becomes 2-column grid, charts side-by-side |
| 481–768px | Mobile | Stacked | Icon-only add btn, stacked toolbar, always-visible delete |
| < 480px | Small Mobile | Compact | 130px progress ring, tighter spacing, smaller text |
Toggle with the moon/sun button in the header. The entire UI transitions smoothly in 400ms.
How it works:
<html data-theme="light|dark">controls the active theme- CSS Custom Properties in
:root(light) are overridden by[data-theme="dark"] - Every color, shadow, and border updates instantly — no per-element class toggling
- Chart.js colors are updated programmatically on toggle
- Preference persisted in
localStorageunder keytaskflow_theme
The signature visual element is built with pure SVG and CSS transitions:
Circumference = 2 x PI x radius = 2 x 3.14159 x 75 = 471.24
stroke-dasharray: 471.24 (total dash length = full circle)
stroke-dashoffset: 471.24 * (1 - percent/100)
0% complete --> offset = 471.24 (hidden)
50% complete --> offset = 235.62 (half circle)
100% complete --> offset = 0 (full circle)
The stroke uses an SVG linearGradient from Indigo (#6366f1) to Cyan (#06b6d4), creating a vibrant gradient ring. A 1-second cubic-bezier CSS transition smoothly animates changes.
- Shows tasks completed per day for the last 7 days
- Data sourced from the
completedAttimestamp on each task - Rounded bars (
borderRadius: 8), no legend, custom tooltips
- Green (
#10b981) for completed, Amber (#f59e0b) for pending - 72% cutout for a clean ring aesthetic
- Graceful empty state: gray ring with "No tasks" label when no data
Both charts auto-update on every state change and adapt their colors for dark mode.
| Concern | Protection |
|---|---|
| XSS | All user input escaped via escapeHtml() before innerHTML rendering |
| Injection | No eval(), no Function(), no dynamic code execution |
| Data scope | localStorage only (same-origin), no external API calls |
| CDN | Chart.js loaded from jsdelivr; consider adding SRI hashes for production |
Upgrading from the old version? It's automatic. On first load, the app detects the legacy todos key (plain string array) in localStorage, migrates each item to the new rich object format with id, priority, and timestamps, saves under the new taskflow_todos key, and removes the old key. Zero data loss.
A comprehensive 27-page architecture PDF is included at docs/TaskFlow_Architecture.pdf. It covers:
- System architecture diagrams
- Data flow and state management
- HTML/CSS/JS layer deep dives
- Circular progress bar math
- Chart.js integration details
- Theme system internals
- Responsive breakpoint strategy
- Animation catalog
- Security & performance notes
- Developer guide for extending the app
To regenerate the PDF after making changes:
pip install fpdf2
python generate_docs.pyContributions are welcome! Here's how to get started:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Due dates with calendar picker
- Drag-and-drop task reordering
- Task categories/tags
- Export tasks as JSON/CSV
- PWA support (offline mode + Add to Home Screen)
- Subtasks / nested checklists
- Pomodoro timer integration
- Multi-board / project support
Distributed under the MIT License. See LICENSE for more information.
Built with vanilla web standards. No frameworks. No build tools. Just clean code.
Made with dedication by danialeyz
If this project helped you, consider giving it a star!