✨ Key Features • 🎬 Live Showcase • 📊 Analytics Dashboard • 🛠️ Tech Stack • 🚀 Quick Start • 📁 Project Structure • 🤝 Contributing • 🗺️ Roadmap

---

🌟 Overview

Task Manager & Productivity Dashboard is a fast, responsive, and distraction-free web productivity platform built using pure Vanilla HTML5, modern CSS3, and ES6+ JavaScript, enhanced with interactive visual analytics by Chart.js.

Whether tracking daily sprint objectives, prioritizing critical deadlines, reviewing monthly completion velocity, or keeping personal goals organized, Task Manager provides a seamless experience with zero runtime dependencies and 100% client-side privacy.

---

🎬 Live Interactive Showcase

▲ Real-time demonstration: Creating tasks with priorities, marking completion, inline double-click editing, history toggling, and rendering interactive Chart.js analytics.

---

✨ Key Features

⚡ Smart Task Management Create tasks instantly with custom due dates and color-coded priority indicators (Low, Medium, High) for rapid visual triage.	✏️ Inline Double-Click Editing Double-click directly on any task title to edit it inline on the fly without interrupting your workflow or dealing with bulky modals.
🚨 Automated Overdue Detection Active tasks that cross their due dates are highlighted with clear visual overdue badges and styling so nothing slips through the cracks.	📅 Month-wise Task Grouping When viewing all tasks, items are automatically collated by their respective calendar month, making mid-to-long term scheduling effortless.
⏳ History Mode & Multi-Filter One-click toggle between active view and comprehensive history. Filter tasks dynamically across All, Active, Done, and Overdue.	💾 Zero-Setup Local Persistence All state is automatically synchronized with the browser's localStorage API. No database setup, no account creation, and zero latency.

---

📊 Analytics Dashboard

Gain instant visual insight into your workload and completion velocity with dynamic, responsive Chart.js data visualizations:

graph TD
    A[Tasks Database] --> B[Priority Breakdown]
    A --> C[Monthly Trends]
    B --> D[🍩 Doughnut / Pie Chart: Low vs Medium vs High]
    C --> E[📊 Bar Chart: Weekly Completions with Month Navigation]

Loading

• 🍩 Priority Breakdown Chart: Visualizes task distribution across Low, Medium, and High priorities, complete with a custom legend.
• 📈 Monthly Completion Trends: Interactive bar chart plotting completed tasks week-by-week. Includes intuitive ◀ and ▶ month-by-month navigation buttons to track your productivity journey over time.

---

🛠️ Tech Stack

Technology	Role	Highlights
	Structure	Semantic HTML5, accessible form controls, ARIA attributes
	Styling	Vanilla CSS, CSS Variables (:root), Flexbox, Grid, Glassmorphism, Micro-animations
	Logic & State	Pure ES6+, DOM manipulation, Event delegation, localStorage API
	Data Visualization	Priority doughnut charts & month-by-month completion trend bar charts

🔍 Why Pure Vanilla Web Technologies? (Click to Expand)

• ⚡ Zero Build Step: No npm install, no Webpack/Vite bundlers, no waiting for compiles.
• 🪶 Ultra Lightweight: Sub-millisecond load times with negligible memory footprint.
• 🔒 Privacy-First: No external tracking or remote server calls for task data.
• 📱 Universally Compatible: Runs identically across any modern desktop, tablet, or mobile browser.

---

📁 Project Structure

taskmanager/
├── 📄 index.html                # Main semantic application markup & canvas containers
├── 🎨 style.css                 # Design system, CSS variables, glassmorphism & dark theme
├── ⚡ script.js                 # Core application logic, event listeners & Chart.js engine
├── ⚙️ netlify.toml              # Netlify static deployment & security headers
├── 📖 README.md                 # Project documentation & animated showcase
├── 🤝 CONTRIBUTING.md           # Contribution guidelines & branching workflow
├── 📜 CODE_OF_CONDUCT.md        # Community participation standards
├── ⚖️ LICENSE                   # MIT Open Source License
├── 🖼️ assets/                   # Visual demo assets & graphics
│   └── taskmanager-demo.gif     # Recorded application interaction animation
└── 📂 .github/                  # GitHub configuration & templates
    ├── PULL_REQUEST_TEMPLATE.md
    └── ISSUE_TEMPLATE/
        ├── bug_report.md
        └── feature_request.md

---

🚀 Quick Start

You can run this project locally in seconds without installing Node.js or any package manager!

Option 1: Direct Browser Launch (Fastest)

1. Clone the repository:

   git clone https://github.com/qwerty274/taskmanager-nsoc2.git
   cd taskmanager-nsoc2

2. Open index.html:
   • Double-click index.html in your file explorer, or
   • Drag and drop index.html directly into Chrome, Firefox, Edge, or Safari.

Option 2: VS Code Live Server

1. Open the project folder in Visual Studio Code:

   code .

2. Install the Live Server extension (if not already installed).
3. Right-click index.html and select "Open with Live Server" or click "Go Live" in the status bar.

Option 3: Local HTTP Server

# Using Python 3:
python -m http.server 8080

# Or using Node npx:
npx serve .

Navigate to http://localhost:8080 in your web browser.

---

🗺️ Roadmap

Exciting features planned for future releases:

• 🔄 Drag-and-Drop Reordering: Interactive task sequencing using HTML5 Drag and Drop API.
• 🏷️ Custom Tags & Categories: Multi-label tagging with custom color badges.
• 📥 Data Import / Export: One-click JSON / CSV backup and restore.
• 📋 Subtasks & Nested Checklists: Granular sub-item progress tracking.
• ☀️ Dark / Light Theme Switcher: Dynamic theme toggle with persistent preference.
• 📱 Progressive Web App (PWA): Offline service workers and mobile app installability.

---

🤝 Contributing

Contributions make open-source projects thrive! Whether reporting a bug, proposing a new feature, or submitting a pull request, your contributions are warmly welcomed.

1. Fork the repository on GitHub.
2. Clone your fork locally:

   git clone https://github.com/YOUR_USERNAME/taskmanager-nsoc2.git

3. Create a descriptive feature branch:

   git checkout -b feature/drag-and-drop-tasks

4. Commit your changes following Conventional Commits:

   git commit -m "feat: add drag-and-drop task reordering"

5. Push to your branch:

   git push origin feature/drag-and-drop-tasks

6. Open a Pull Request via the GitHub web interface.

Please read our CONTRIBUTING.md and CODE_OF_CONDUCT.md before contributing.

---

📄 License

Distributed under the MIT License. See LICENSE for full details.

---

Developed with ❤️ for productive minds everywhere • Give this repository a ⭐️ if you find it helpful!