task-manager/ ├── index.html ├── styles.css ├── script.js └── README.md 

class Task { constructor(id, title, description, category, priority, dueDate, completed = false) { this.id = id; this.title = title; this.description = description; this.category = category; this.priority = priority; this.dueDate = dueDate; this.completed = completed; this.createdAt = new Date().toISOString(); } // Method to check if task is overdue isOverdue() { if (!this.dueDate || this.completed) return false; return new Date(this.dueDate) < new Date(); } // Method to get days until due getDaysUntilDue() { if (!this.dueDate) return null; const diffTime = new Date(this.dueDate) - new Date(); return Math.ceil(diffTime / (1000 * 60 * 60 * 24)); } } 

class TaskManager { constructor() { this.tasks = this.loadTasks(); this.currentFilter = 'all'; this.currentSort = 'dueDate'; this.initializeEventListeners(); this.renderTasks(); } // Load tasks from localStorage loadTasks() { const savedTasks = localStorage.getItem('tasks'); if (savedTasks) { return JSON.parse(savedTasks).map(taskData => new Task( taskData.id, taskData.title, taskData.description, taskData.category, taskData.priority, taskData.dueDate, taskData.completed ) ); } return []; } // Save tasks to localStorage saveTasks() { localStorage.setItem('tasks', JSON.stringify(this.tasks)); } // Add a new task addTask(taskData) { const task = new Task( Date.now().toString(), taskData.title, taskData.description, taskData.category, taskData.priority, taskData.dueDate ); this.tasks.push(task); this.saveTasks(); this.renderTasks(); // Show success notification this.showNotification('Task added successfully!', 'success'); } // Update an existing task updateTask(id, updates) { const taskIndex = this.tasks.findIndex(task => task.id === id); if (taskIndex !== -1) { Object.assign(this.tasks[taskIndex], updates); this.saveTasks(); this.renderTasks(); this.showNotification('Task updated successfully!', 'success'); } } // Delete a task deleteTask(id) { this.tasks = this.tasks.filter(task => task.id !== id); this.saveTasks(); this.renderTasks(); this.showNotification('Task deleted successfully!', 'info'); } // Toggle task completion toggleTask(id) { const task = this.tasks.find(task => task.id === id); if (task) { task.completed = !task.completed; this.saveTasks(); this.renderTasks(); } } // Filter tasks based on status filterTasks(filter) { this.currentFilter = filter; this.renderTasks(); } // Get filtered tasks getFilteredTasks() { let filteredTasks = [...this.tasks]; // Apply status filter switch (this.currentFilter) { case 'active': filteredTasks = filteredTasks.filter(task => !task.completed); break; case 'completed': filteredTasks = filteredTasks.filter(task => task.completed); break; case 'overdue': filteredTasks = filteredTasks.filter(task => task.isOverdue()); break; } // Sort tasks filteredTasks.sort((a, b) => { switch (this.currentSort) { case 'dueDate': if (!a.dueDate && !b.dueDate) return 0; if (!a.dueDate) return 1; if (!b.dueDate) return -1; return new Date(a.dueDate) - new Date(b.dueDate); case 'priority': const priorityOrder = { high: 3, medium: 2, low: 1 }; return priorityOrder[b.priority] - priorityOrder[a.priority]; case 'created': return new Date(b.createdAt) - new Date(a.createdAt); default: return 0; } }); return filteredTasks; } } 

// Render tasks to the DOM renderTasks() { const taskList = document.getElementById('task-list'); const filteredTasks = this.getFilteredTasks(); taskList.innerHTML = ''; if (filteredTasks.length === 0) { taskList.innerHTML = ` <div class="empty-state"> <h3>No tasks found</h3> <p>Add a new task to get started!</p> </div> `; return; } filteredTasks.forEach(task => { const taskElement = this.createTaskElement(task); taskList.appendChild(taskElement); }); this.updateTaskStats(); } // Create individual task element createTaskElement(task) { const taskEl = document.createElement('div'); taskEl.className = `task-item ${task.completed ? 'completed' : ''} ${task.isOverdue() ? 'overdue' : ''}`; taskEl.dataset.taskId = task.id; const daysUntilDue = task.getDaysUntilDue(); const dueDateDisplay = task.dueDate ? `<span class="due-date ${task.isOverdue() ? 'overdue' : ''}"> ${task.isOverdue() ? 'Overdue' : daysUntilDue === 0 ? 'Due today' : `${daysUntilDue} days left`} </span>` : ''; taskEl.innerHTML = ` <div class="task-content"> <div class="task-header"> <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''}> <h3 class="task-title">${task.title}</h3> <span class="task-priority priority-${task.priority}">${task.priority.toUpperCase()}</span> </div> <p class="task-description">${task.description}</p> <div class="task-meta"> <span class="task-category">${task.category}</span> ${dueDateDisplay} </div> </div> <div class="task-actions"> <button class="btn btn-sm btn-secondary edit-task">Edit</button> <button class="btn btn-sm btn-danger delete-task">Delete</button> </div> `; return taskEl; } 

// Initialize all event listeners initializeEventListeners() { // Task form submission document.getElementById('task-form').addEventListener('submit', (e) => { e.preventDefault(); this.handleTaskSubmission(e.target); }); // Filter buttons document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', (e) => { document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); e.target.classList.add('active'); this.filterTasks(e.target.dataset.filter); }); }); // Sort dropdown document.getElementById('sort-select').addEventListener('change', (e) => { this.currentSort = e.target.value; this.renderTasks(); }); // Search functionality document.getElementById('search-input').addEventListener('input', (e) => { this.searchTasks(e.target.value); }); // Task list event delegation document.getElementById('task-list').addEventListener('click', (e) => { const taskItem = e.target.closest('.task-item'); if (!taskItem) return; const taskId = taskItem.dataset.taskId; if (e.target.classList.contains('task-checkbox')) { this.toggleTask(taskId); } else if (e.target.classList.contains('edit-task')) { this.editTask(taskId); } else if (e.target.classList.contains('delete-task')) { this.confirmDeleteTask(taskId); } }); } 

// Search functionality searchTasks(query) { if (!query.trim()) { this.renderTasks(); return; } const searchResults = this.tasks.filter(task => task.title.toLowerCase().includes(query.toLowerCase()) || task.description.toLowerCase().includes(query.toLowerCase()) || task.category.toLowerCase().includes(query.toLowerCase()) ); this.renderFilteredTasks(searchResults); } // Task statistics updateTaskStats() { const totalTasks = this.tasks.length; const completedTasks = this.tasks.filter(task => task.completed).length; const overdueTasks = this.tasks.filter(task => task.isOverdue()).length; document.getElementById('total-tasks').textContent = totalTasks; document.getElementById('completed-tasks').textContent = completedTasks; document.getElementById('overdue-tasks').textContent = overdueTasks; } // Notification system showNotification(message, type = 'info') { const notification = document.createElement('div'); notification.className = `notification notification-${type}`; notification.textContent = message; document.body.appendChild(notification); // Trigger animation setTimeout(() => notification.classList.add('show'), 100); // Remove notification after 3 seconds setTimeout(() => { notification.classList.remove('show'); setTimeout(() => notification.remove(), 300); }, 3000); } 

// Initialize the task manager when DOM is loaded document.addEventListener('DOMContentLoaded', () => { const taskManager = new TaskManager(); // Make it globally accessible for debugging window.taskManager = taskManager; console.log('Task Manager initialized successfully!'); }); 

// Debounced search implementation const debounce = (func, wait) => { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Usage const debouncedSearch = debounce((query) => { this.searchTasks(query); }, 300);