✨ 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.
🔍 Real-Time Task Search Filter active or historical tasks by keyword with instant live matching and one-click clear button.	🔀 Multi-Criteria Sorting Sort tasks dynamically by due date (earliest or latest), priority level (high to low or low to high), or alphabetically.

---

📊 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 (React + Vite)

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

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

3. Build for production:

   npm run build

📅 Overdue Date Regression Checks

1. Yesterday's due date: Add an active task due yesterday. Confirm that it receives an Overdue badge and appears under the Overdue history filter.
2. Today's due date: Add an active task due today. Confirm that it does not receive an Overdue badge.
3. No due date: Using browser developer tools, set a stored task's dueDate to an empty string and reload. Confirm that it never receives an Overdue badge.
4. Date change while open: Keep a task due today open past local midnight, or temporarily advance the system date by one day. Return to the tab and confirm that the badge appears within 60 seconds without reloading the page.

💾 Stored Data Regression Checks

Use browser developer tools to run each command, then reload the page:

1. Malformed JSON: Run localStorage.setItem('tasks', '{invalid'). Confirm that the app loads without tasks or browser errors.
2. Unexpected storage value: Run localStorage.setItem('tasks', '{"text":"Not an array"}'). Confirm that the value is ignored.
3. Missing required fields: Run localStorage.setItem('tasks', '[{"text":"Incomplete task"}]'). Confirm that the incomplete record is not rendered.
4. Invalid field types: Run localStorage.setItem('tasks', '[{"text":"Invalid task","dueDate":null,"priority":"medium","completed":"false","completedAt":null}]'). Confirm that the invalid record is not rendered.
5. Mixed valid and invalid records: Run localStorage.setItem('tasks', JSON.stringify([{ text: 'Keep this task', dueDate: '', priority: 'medium', completed: false, completedAt: null }, { text: 'Discard this task', dueDate: '', priority: 'medium', completed: 'false', completedAt: null }])). Confirm that only Keep this task is rendered and remains usable.

🔍 Search & Sorting Regression Checks

1. Live Search Filtering: Type a keyword into the search bar. Confirm that only matching tasks appear, and the clear (×) button is visible.
2. Empty Search Result: Search for a non-existent task name. Confirm that the custom empty state message (🔍 No tasks found matching "...") is displayed.
3. One-Click Clear: Click the × button. Confirm that the search input is cleared, the clear button hides, and the full task list is restored.
4. Sorting Verification: Select each sort option (Due Date, Priority, Title A-Z/Z-A) and confirm that items re-order instantly without altering task state or persistence.
5. Combined Filter & Sort: Apply a filter (e.g., Done or Active) or switch to History mode and confirm that search and sort accurately scope to that view.

---

🗺️ 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.
• 🔍 Task Search & Multi-Criteria Sorting: Live search by keyword and dynamic sorting by date, priority, or title.
• ☀️ 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!