app.js

// DOM 元素
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
const emptyState = document.getElementById('emptyState');

// 从 localStorage 加载任务
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

// 保存任务到 localStorage
function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// 更新空状态显示
function updateEmptyState() {
    if (tasks.length === 0) {
        emptyState.classList.remove('hidden');
    } else {
        emptyState.classList.add('hidden');
    }
}

// 渲染单个任务
function createTaskElement(task) {
    const li = document.createElement('li');
    li.className = `task-item${task.completed ? ' completed' : ''}`;
    li.dataset.id = task.id;

    li.innerHTML = `
        <div class="checkbox"></div>
        <span class="task-text">${escapeHtml(task.text)}</span>
        <button class="delete-btn" title="删除">×</button>
    `;

    // 点击复选框或文本切换完成状态
    const checkbox = li.querySelector('.checkbox');
    const taskText = li.querySelector('.task-text');
    const toggleComplete = () => toggleTask(task.id);

    checkbox.addEventListener('click', toggleComplete);
    taskText.addEventListener('click', toggleComplete);

    // 删除按钮
    const deleteBtn = li.querySelector('.delete-btn');
    deleteBtn.addEventListener('click', () => deleteTask(task.id));

    return li;
}

// 防止 XSS 攻击
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// 渲染所有任务
function renderTasks() {
    taskList.innerHTML = '';
    tasks.forEach(task => {
        taskList.appendChild(createTaskElement(task));
    });
    updateEmptyState();
}

// 添加新任务
function addTask() {
    const text = taskInput.value.trim();
    if (!text) return;

    const task = {
        id: Date.now(),
        text: text,
        completed: false
    };

    tasks.unshift(task);
    saveTasks();

    // 添加到列表顶部（带动画）
    const taskElement = createTaskElement(task);
    taskList.insertBefore(taskElement, taskList.firstChild);
    updateEmptyState();

    // 清空输入框
    taskInput.value = '';
    taskInput.focus();
}

// 切换任务完成状态
function toggleTask(id) {
    const task = tasks.find(t => t.id === id);
    if (task) {
        task.completed = !task.completed;
        saveTasks();

        // 更新 UI
        const taskElement = taskList.querySelector(`[data-id="${id}"]`);
        if (taskElement) {
            taskElement.classList.toggle('completed');
        }
    }
}

// 删除任务
function deleteTask(id) {
    tasks = tasks.filter(t => t.id !== id);
    saveTasks();

    // 移除元素（带动画）
    const taskElement = taskList.querySelector(`[data-id="${id}"]`);
    if (taskElement) {
        taskElement.style.transform = 'translateX(100%)';
        taskElement.style.opacity = '0';
        setTimeout(() => {
            taskElement.remove();
            updateEmptyState();
        }, 200);
    }
}

// 事件监听
addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addTask();
    }
});

// 初始化渲染
renderTasks();