TaskMaster - Task & Habit Tracker

Project Overview

TaskMaster is a fully functional, interactive DOM-based web application built with Vanilla JavaScript. It serves as a comprehensive task and habit tracking system that helps users manage their daily tasks, organize them by categories and priorities, and track their completion status.

Problem Statement

In today's fast-paced world, individuals struggle to keep track of their tasks, deadlines, and priorities. Many task management solutions require complex setups, internet connectivity, or subscriptions. TaskMaster solves this problem by providing a simple, intuitive, and fully client-side task management application that works entirely in the browser without any backend dependencies.

Features Implemented

Core Functionality

• ✅ Add Tasks: Create new tasks with custom names, categories, priorities, and optional due dates
• ✅ Edit Tasks: Modify existing tasks through an intuitive modal interface
• ✅ Complete Tasks: Mark tasks as completed/incomplete with visual feedback
• ✅ Delete Tasks: Remove tasks with confirmation dialog
• ✅ Filter Tasks: View all tasks, only active tasks, or only completed tasks
• ✅ Task Statistics: Real-time display of task counts and completion status

Advanced Features

• ✅ LocalStorage Persistence: All tasks are automatically saved to browser's LocalStorage
• ✅ Form Validation: Real-time validation with error messages
• ✅ Due Date Tracking: Visual indicators for overdue tasks
• ✅ Priority System: Low, Medium, and High priority levels with color-coded badges
• ✅ Category Organization: Tasks organized by Work, Personal, Health, Shopping, and Other
• ✅ Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile devices
• ✅ Keyboard Shortcuts: Support for Escape key to close modals and Ctrl/Cmd+Enter to submit forms
• ✅ Animations: Smooth transitions and animations for better user experience
• ✅ Empty State Handling: Helpful messages when no tasks are present

🛠️ DOM Concepts Used

1. Dynamic Element Creation

• Tasks are created dynamically using document.createElement()
• Modal elements are generated programmatically
• Notification elements are created and removed on-the-fly

2. DOM Manipulation

• Adding Elements: New task items are appended to the DOM using appendChild()
• Removing Elements: Tasks are removed using filter() and re-rendering
• Updating Elements: Task content, styles, and classes are updated based on state
• Toggling Elements: Task completion status toggles CSS classes and visibility

3. Event Handling

• Form Submission: submit event listeners on both add and edit forms
• Click Events: Button clicks for filtering, editing, deleting, and completing tasks
• Change Events: Checkbox changes for task completion
• Keyboard Events: Keyboard shortcuts for improved UX
• Input Events: Real-time validation on input fields
• Event Delegation: Efficient event handling through direct element binding

4. Style Manipulation

• Dynamic class toggling (classList.add(), classList.remove())
• Inline style updates for overdue dates
• CSS custom properties for theming
• Conditional styling based on task state (completed, priority, etc.)

5. DOM Querying

• getElementById() for accessing specific elements
• querySelector() and querySelectorAll() for selecting elements
• dataset attributes for storing task IDs
• Traversal methods for accessing parent/child elements

6. Conditional Rendering

• Tasks are filtered and rendered based on current filter state
• Empty state is shown/hidden based on task list length
• Action buttons are conditionally displayed (e.g., "Complete" button only for active tasks)
• Modal visibility is controlled through class toggling

Steps to Run the Project

1. Clone or Download the project files to your local machine

2. Open the Project

   • Ensure you have index.html, style.css, and script.js in the same directory

3. Run the Application

   • Option 1: Double-click index.html to open it in your default browser

   • Option 2: Use a local server:

     Then navigate to http://localhost:8000 in your browser

4. Start Using

   • Add your first task using the form
   • Tasks are automatically saved to your browser's LocalStorage
   • Refresh the page to see your tasks persist

Technical Stack

• HTML5: Semantic markup structure
• CSS3: Modern styling with Flexbox, Grid, CSS Variables, and Animations
• Vanilla JavaScript (ES6+):
  • Arrow functions
  • Template literals
  • Array methods (map, filter, find, forEach)
  • Destructuring
  • LocalStorage API
  • DOM APIs

Code Structure

EndTermProject/
├── index.html      # Main HTML structure
├── style.css       # All styling and responsive design
├── script.js        # Application logic and DOM manipulation
└── README.md       # Project documentation

UI/UX Features

• Clean Interface: Modern, minimalist design with clear visual hierarchy
• Visual Feedback:
  • Hover effects on interactive elements
  • Color-coded priority badges
  • Completion status indicators
  • Overdue date highlighting
• Responsive Layout: Adapts seamlessly to different screen sizes
• Accessibility:
  • Semantic HTML elements
  • Proper form labels
  • Keyboard navigation support
  • Clear error messages

Known Limitations

1. Browser Storage Limits: LocalStorage has a size limit (~5-10MB depending on browser). Very large task lists may encounter storage issues.

2. No Data Export: Currently, there's no way to export tasks to a file format (CSV, JSON, etc.).

3. No Task Search: The application doesn't include a search/filter by text functionality.

4. No Task Sorting: Tasks are displayed in the order they were created; no sorting by date, priority, or name.

5. Single User: The application is designed for single-user use; data is stored locally in the browser.

6. No Cloud Sync: Tasks are only stored locally; they won't sync across devices.

Future Enhancements (Not Implemented)

• Task search functionality
• Task sorting options
• Data export/import
• Task categories customization
• Recurring tasks
• Task notes/descriptions
• Dark mode toggle
• Task statistics and analytics