如何使用JavaScript来创建一个简单的待办事项列表应用｜青训营#青训营笔记创作活动通过一个完整的项目实例来演示

#青训营笔记创作活动通过一个完整的项目实例来演示如何使用JavaScript来创建一个简单的待办事项列表应用。在这个项目中，我们将实现以下功能：

添加新的待办事项
标记已完成的待办事项
删除待办事项

我们将使用HTML、CSS和JavaScript来完成这个项目。

步骤 1：设置 HTML 结构和样式

首先，我们需要创建一个 HTML 文件来构建页面结构，然后使用 CSS 来设置基本样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Todo List App</title>
</head>
<body>
  <div class="container">
    <h1>Todo List</h1>
    <input type="text" id="newTodo" placeholder="Enter a new todo">
    <button id="addTodo">Add</button>
    <ul id="todoList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

现在，我们创建一个名为 "styles.css" 的 CSS 文件来设置基本样式。

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  text-align: center;
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

h1 {
  margin-top: 0;
}

input[type="text"] {
  padding: 5px;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

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

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  margin: 5px 0;
  background-color: #f9f9f9;
  border-radius: 3px;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

步骤 2：编写 JavaScript 逻辑

现在，我们将在名为 "script.js" 的 JavaScript 文件中编写我们的应用逻辑。

const newTodoInput = document.getElementById("newTodo");
const addTodoButton = document.getElementById("addTodo");
const todoList = document.getElementById("todoList");

addTodoButton.addEventListener("click", addTodo);

function addTodo() {
  const todoText = newTodoInput.value.trim();
  if (todoText !== "") {
    const li = document.createElement("li");
    li.innerHTML = `
      <span>${todoText}</span>
      <button class="completeBtn">Complete</button>
      <button class="deleteBtn">Delete</button>
    `;
    todoList.appendChild(li);
    newTodoInput.value = "";
    attachTodoButtons(li);
  }
}

function attachTodoButtons(todoItem) {
  const completeButton = todoItem.querySelector(".completeBtn");
  const deleteButton = todoItem.querySelector(".deleteBtn");

  completeButton.addEventListener("click", () => {
    todoItem.classList.toggle("completed");
  });

  deleteButton.addEventListener("click", () => {
    todoItem.remove();
  });
}

现在我们已经完成了一个简单的待办事项列表应用。用户可以输入新的待办事项，点击 "Add" 按钮添加到列表中。每个待办事项都有一个 "Complete" 按钮用于标记为已完成，以及一个 "Delete" 按钮用于删除该项。已完成的待办事项会有一条删除线。

你可以将上述的 HTML、CSS 和 JavaScript 代码分别保存为对应的文件，然后在浏览器中打开 HTML 文件查看应用效果。这个项目只是一个简单的示例，你可以根据需要进行扩展和改进。当涉及到一个待办事项列表应用时，有一些技术和亮点是值得注意的。让我详细描述一下其中涉及的技术和实现方法：

HTML 结构与样式： 应用的外观和用户界面是通过 HTML 和 CSS 构建的。HTML 用于创建页面结构，CSS 用于设置样式。在这个项目中，使用了简单的盒模型布局，通过 CSS 设置了容器、按钮、输入框等元素的样式，使应用具有清晰的外观。
事件监听与处理： 通过 JavaScript 来监听用户的事件并进行处理。在这个项目中，使用了 addEventListener 来监听按钮的点击事件，以及输入框的回车键事件，以便实现添加待办事项的功能。
动态 DOM 操作： JavaScript 使我们能够动态地操作 DOM 元素。在这个项目中，通过 createElement 和 appendChild 方法创建新的待办事项元素，并将它们添加到待办事项列表中。同时，使用 remove 方法删除待办事项。
事件委托： 使用事件委托的方式可以避免为每个待办事项都添加监听器。在这个项目中，通过在待办事项列表上添加一个监听器，可以捕获到待办事项内部按钮的点击事件，从而实现完成和删除功能。
交互性： 通过给已完成的待办事项添加类名，并使用 CSS 样式来标识它们，从而使用户能够清楚地知道哪些任务已经完成。这种交互性提高了用户体验。
代码结构与模块化： 将代码分成不同的函数和模块，有助于代码的可读性和可维护性。在这个项目中，通过将添加按钮事件、完成按钮事件和删除按钮事件等功能分离为不同的函数，提高了代码的结构化。
用户输入验证： 在添加新待办事项之前，应用会检查用户输入是否为空。这有助于避免添加空白的待办事项。
UI 反馈： 通过添加待办事项时清空输入框、标记待办事项为已完成时改变样式，或是删除待办事项时使其从列表中移除，为用户提供了实时的 UI 反馈，让用户能够清楚地看到他们的操作。

总之，这个项目是一个简单但完整的示例，演示了使用 HTML、CSS 和 JavaScript 来构建一个基本的待办事项列表应用。通过这个项目，你可以了解到如何处理用户输入、动态操作 DOM、添加事件监听器以及处理交互性等方面的基本技术。你可以根据这个示例进一步扩展功能，添加更多的亮点和复杂性。

如何使用JavaScript来创建一个简单的待办事项列表应用 ｜ 青训营

如何使用JavaScript来创建一个简单的待办事项列表应用｜青训营