构建一个高效的原生 JavaScript 代办清单

## 用原生 JavaScript 手写代办清单：简化您的任务管理

引言

在信息泛滥的数字时代，高效管理任务至关重要。原生 JavaScript 作为一种强大的编程语言，为创建自定义且高效的代办清单应用程序提供了无限可能。本文将指导您一步步用手写原生 JavaScript 构建一个简洁直观的代办清单应用程序。我们将涵盖 HTML、CSS 和 JavaScript 的关键组件，并提供代码示例，以便您轻松理解并开始动手构建自己的应用程序。

HTML 结构

我们的应用程序将有一个简单的 HTML 结构，包括一个容器来容纳代办清单项和一个输入表单来添加新项。

<div id="container">
  <h1>我的代办清单</h1>
  <ul id="list"></ul>
  <form id="form">
    <input type="text" id="task-input" placeholder="添加新任务">
    <button type="submit" id="add-button">添加</button>
  </form>
</div>

CSS 样式

接下来，我们将使用 CSS 为应用程序添加样式，使其具有美观的外观。

#container {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  background-color: #f5f5f5;
}

h1 {
  text-align: center;
  margin-top: 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}

li:hover {
  background-color: #f0f0f0;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript 逻辑

现在，我们使用 JavaScript 来实现应用程序的核心逻辑。我们将处理添加新任务、删除任务和标记任务为已完成。

// 获取 DOM 元素
const form = document.getElementById("form");
const taskInput = document.getElementById("task-input");
const list = document.getElementById("list");

// 保存任务
let tasks = [];

// 添加任务
const addTask = (e) => {
  e.preventDefault();
  
  const task = taskInput.value;

  if (task) {
    tasks.push({ task, completed: false });
    renderTasks();
    taskInput.value = "";
  }
};

// 渲染任务
const renderTasks = () => {
  list.innerHTML = "";

  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    const p = document.createElement("p");
    const button = document.createElement("button");
    const checkbox = document.createElement("input");

    p.textContent = task.task;

    checkbox.type = "checkbox";
    checkbox.checked = task.completed;
    checkbox.addEventListener("change", () => {
      task.completed = !task.completed;
      renderTasks();
    });

    button.textContent = "删除";
    button.addEventListener("click", () => {
      tasks.splice(index, 1);
      renderTasks();
    });

    li.appendChild(checkbox);
    li.appendChild(p);
    li.appendChild(button);

    list.appendChild(li);
  });
};

// 事件监听器
form.addEventListener("submit", addTask);

// 初始渲染
renderTasks();

结语

通过本文，您已经掌握了使用原生 JavaScript 手写代办清单应用程序所需的基本知识。您可以进一步扩展这个应用程序，添加更多功能，例如任务排序、任务优先级和提醒。通过实践和创新，您可以创建符合您独特需求的强大代办清单解决方案。

---