Thuta Learning
ရှာဖွေရန်
ProjectsProgrammingbeginner

To-Do List

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

✅ 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
To-Do List | Thuta Learning