待办事项列表

创建、管理和完成你的任务

总任务: 0 已完成: 0

核心代码 现代模式

// 使用类和现代 ES6+ 特性
class TodoApp {
    constructor() {
        this.todos = this.loadTodos();
        this.filter = 'all';
        this.initializeEventListeners();
        this.render();
    }

    loadTodos() {
        const saved = localStorage.getItem('todos');
        return saved ? JSON.parse(saved) : [];
    }

    addTodo(text) {
        const todo = {
            id: crypto.randomUUID(),
            text,
            completed: false,
            createdAt: Date.now()
        };
        this.todos.unshift(todo);
        this.saveTodos();
        this.render();
    }

    toggleTodo(id) {
        this.todos = this.todos.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        );
        this.saveTodos();
        this.render();
    }

    deleteTodo(id) {
        this.todos = this.todos.filter(todo => todo.id !== id);
        this.saveTodos();
        this.render();
    }

    // 使用 crypto.randomUUID() 生成唯一 ID
    // 使用 localStorage 持久化数据
    // 使用事件委托处理点击
}
todos.forEach(todo => { const li = document.createElement('li'); li.className = 'todo-item ' + (todo.completed ? 'completed' : ''); li.innerHTML = ` ${todo.text} `; list.appendChild(li); }); }