â To-Do List App - Full-featured task manager with add, delete, and toggle completion. Intermediate project!
đ Concepts Covered:
⢠Arrays and objects
⢠Array methods (push, filter, map)
⢠Local Storage
⢠DOM manipulation
⢠Event handling
⨠Features:
⢠Add tasks
⢠Mark as complete
⢠Delete tasks
⢠Filter tasks
⢠Persist data
javascript
// To-Do List Manager
class TodoList {
constructor() {
this.tasks = [];
this.nextId = 1;
}
addTask(title) {
const task = {
id: this.nextId++,
title: title,
completed: false,
createdAt: new Date().toISOString()
};
this.tasks.push(task);
return `Added: "${title}"`;
}
toggleTask(id) {
const task = this.tasks.find(t => t.id === id);
if (task) {
task.completed = !task.completed;
return `Task ${id} ${task.completed ? 'completed' : 'uncompleted'}`;
}
return "Task not found";
}
deleteTask(id) {
const index = this.tasks.findIndex(t => t.id === id);
if (index !== -1) {
const task = this.tasks.splice(index, 1)[0];
return `Deleted: "${task.title}"`;
}
return "Task not found";
}
getActiveTasks() {
return this.tasks.filter(t => !t.completed);
}
getCompletedTasks() {
return this.tasks.filter(t => t.completed);
}
getAllTasks() {
return this.tasks.map(t =>
`[${t.completed ? 'â' : ' '}] ${t.id}. ${t.title}`
).join('\n');
}
}
// Demo
const todo = new TodoList();
console.log(todo.addTask("Learn JavaScript"));
console.log(todo.addTask("Build a project"));
console.log(todo.addTask("Master React"));
console.log("\nAll Tasks:");
console.log(todo.getAllTasks());
console.log("\n" + todo.toggleTask(1));
console.log("\nUpdated Tasks:");
console.log(todo.getAllTasks());
console.log("\n" + todo.deleteTask(2));
console.log("\nFinal Tasks:");
console.log(todo.getAllTasks());You should see
Added: "Learn JavaScript" Added: "Build a project" Added: "Master React" All Tasks: [ ] 1. Learn JavaScript [ ] 2. Build a project [ ] 3. Master React Task 1 completed Updated Tasks: [â] 1. Learn JavaScript [ ] 2. Build a project [ ] 3. Master React Deleted: "Build a project" Final Tasks: [â] 1. Learn JavaScript [ ] 3. Master React