A premium, client-side professional task manager designed to seamlessly track work progress, manage deadlines, and export detailed task reports to PDF.
TaskFlow Pro is engineered with a modern, glassmorphic dark-mode interface that makes daily task tracking visually engaging and structurally organized.
- Three-State Workflow Tabs: Separate task views into Not Done, Doing, and Done to monitor exactly where your time is being spent.
- Comprehensive Task Details: Track the Theme/Topic, Start Date, and Deadline Date for every entry.
- Progress Dashboard: Visually track completion percentages and overdue items in real time.
- Premium PDF Export: Generate professional, beautifully formatted PDF reports of your tasks with one click, complete with progress summary statistics.
- Offline First: Automatically saves your tasks locally to your browser so you never lose your progress.
Below is a conceptual visualization of the high-fidelity dashboard:
+--------------------------------------------------------------------------+
| 📋 TaskFlow Pro [ + Add New Task ] [PDF Export] |
| ---------------------------------------------------------------------- |
| [ Progress: 66% Completed ] ========> [========== ] |
| |
| +---------------------+ +---------------------+ +---------------------+
| | 🔴 Not Done (1) | | 🟡 Doing (2) | | 🟢 Done (3) |
| +---------------------+ +---------------------+ +---------------------+
| | * Fix Navbar Bug | | * Refactor API Code | | * Design Logo |
| | Start: 2026-06-01 | | Start: 2026-06-04 | | Start: 2026-05-28 |
| | Due: 2026-06-05 | | Due: 2026-06-08 | | Due: 2026-06-02 |
| | [Move to Doing >] | | [Move to Done >] | | [Archive Task] |
| +---------------------+ +---------------------+ +---------------------+
+--------------------------------------------------------------------------+
- Frontend Structure: HTML5 Semantic Markup
- Styling & Themes: Custom CSS3 with dynamic HSL variable color system, glassmorphism filters, and smooth micro-animations.
- Application Logic: Vanilla JS (ES6+) utilizing LocalStorage for data persistence.
- PDF Generation: Client-side print styling optimized for clean A4 multi-page document layout or direct library export.
task-manager/
├── index.html # The main webpage structure & modal components
├── styles.css # Responsive layouts, glassmorphism theme, and print styles
└── app.js # Task management logic, status transitions, and PDF generation- Clone or Copy the project files to a local directory:
git clone https://github.com/your-username/task-manager.git cd task-manager - Open the
index.htmlfile in any modern web browser (Chrome, Firefox, Safari, Edge):- Windows: Double-click
index.htmlor runstart index.htmlin PowerShell. - macOS/Linux: Run
open index.htmlorxdg-open index.html.
- Windows: Double-click
- No web server or build step required! The application runs completely in the browser.
- Click the Add Task button in the header.
- Enter the Theme/Topic of the task.
- Select the Start Date and the Deadline Date.
- Choose the initial state (Not Done, Doing, or Done).
- Click Save Task.
- Each task card features intuitive controls to move it between status columns (Not Done ➡️ Doing ➡️ Done).
- Tasks can be edited or deleted at any time.
- Click the Export to PDF button in the dashboard action bar.
- The page utilizes a professional CSS print stylesheet that hides web-only controls (like inputs, buttons, and column adjusters) and formats your tasks into a neat, executive-ready table report with:
- A professional title and date stamp.
- A statistics summary showing total tasks, completed tasks, and completion rate.
- Clean, horizontal-ruled rows displaying the Topic, Status, Start Date, and Deadline.
This project is licensed under the MIT License - see the LICENSE file for details.