File size: 4,810 Bytes
1664270 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | document.addEventListener('DOMContentLoaded', () => {
const taskInput = document.getElementById('taskInput');
const submitTaskBtn = document.getElementById('submitTaskBtn');
const taskList = document.getElementById('taskList');
const taskCount = document.getElementById('taskCount');
const clearCompletedBtn = document.getElementById('clearCompletedBtn');
const filterButtons = document.querySelectorAll('.filter-btn');
const addTaskBtn = document.getElementById('addTaskBtn');
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
let currentFilter = 'all';
// Initialize the app
function init() {
renderTasks();
updateTaskCount();
addTaskBtn.addEventListener('click', () => {
taskInput.focus();
});
}
// Add a new task
function addTask() {
const text = taskInput.value.trim();
if (text) {
const newTask = {
id: Date.now(),
text,
completed: false,
createdAt: new Date().toISOString()
};
tasks.unshift(newTask);
saveTasks();
renderTasks();
updateTaskCount();
taskInput.value = '';
}
}
// Save tasks to localStorage
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Render tasks based on current filter
function renderTasks() {
taskList.innerHTML = '';
const filteredTasks = tasks.filter(task => {
if (currentFilter === 'all') return true;
if (currentFilter === 'active') return !task.completed;
if (currentFilter === 'completed') return task.completed;
return true;
});
if (filteredTasks.length === 0) {
const emptyState = document.createElement('div');
emptyState.className = 'p-8 text-center text-gray-500';
emptyState.innerHTML = `
<i data-feather="check-circle" class="w-12 h-12 mx-auto text-gray-300 mb-4"></i>
<p>No tasks found</p>
`;
taskList.appendChild(emptyState);
feather.replace();
return;
}
filteredTasks.forEach(task => {
const todoItem = document.createElement('todo-item');
todoItem.setAttribute('task-id', task.id);
todoItem.setAttribute('text', task.text);
todoItem.setAttribute('completed', task.completed);
todoItem.addEventListener('toggle', (e) => {
toggleTaskComplete(e.detail.id, e.detail.completed);
});
todoItem.addEventListener('delete', (e) => {
deleteTask(e.detail.id);
});
todoItem.addEventListener('edit', (e) => {
editTask(e.detail.id, e.detail.newText);
});
taskList.appendChild(todoItem);
});
}
// Toggle task completion status
function toggleTaskComplete(id, completed) {
const taskIndex = tasks.findIndex(task => task.id === id);
if (taskIndex !== -1) {
tasks[taskIndex].completed = completed;
saveTasks();
updateTaskCount();
}
}
// Delete a task
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
saveTasks();
renderTasks();
updateTaskCount();
}
// Edit a task
function editTask(id, newText) {
const taskIndex = tasks.findIndex(task => task.id === id);
if (taskIndex !== -1 && newText.trim()) {
tasks[taskIndex].text = newText.trim();
saveTasks();
}
}
// Update the task counter
function updateTaskCount() {
const activeTasks = tasks.filter(task => !task.completed).length;
taskCount.textContent = `${activeTasks} ${activeTasks === 1 ? 'task' : 'tasks'} remaining`;
}
// Clear completed tasks
function clearCompleted() {
tasks = tasks.filter(task => !task.completed);
saveTasks();
renderTasks();
updateTaskCount();
}
// Set filter
function setFilter(filter) {
currentFilter = filter;
filterButtons.forEach(btn => {
btn.classList.toggle('active', btn.dataset.filter === filter);
});
renderTasks();
}
// Event listeners
submitTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addTask();
});
clearCompletedBtn.addEventListener('click', clearCompleted);
filterButtons.forEach(btn => {
btn.addEventListener('click', () => setFilter(btn.dataset.filter));
});
init();
}); |