Todo List 项目教程

在这个教程中，我们将学习如何创建一个简单的 Todo List 应用程序。这个项目将帮助你更好地理解 JavaScript 的基本概念和 DOM 操作。

项目目标

• 使用 HTML 创建一个 Todo List 表单。
• 使用 CSS 为 Todo List 添加样式。
• 使用 JavaScript 实现添加、删除和编辑 Todo 项的功能。

实现步骤

1. HTML 结构：
   • 创建一个表单，包含一个输入框和一个提交按钮。
   • 创建一个列表，用于显示 Todo 项。

<form id="todo-form">
  <input type="text" id="todo-input" placeholder="添加任务...">
  <button type="submit">添加</button>
</form>
<ul id="todo-list"></ul>

2. CSS 样式：
   • 为输入框和按钮添加样式。
   • 为列表项添加样式，使其具有视觉区分。

#todo-form {
  margin-bottom: 20px;
}

#todo-input {
  width: 300px;
  padding: 10px;
}

#todo-form button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#todo-list {
  list-style-type: none;
}

#todo-list li {
  background-color: #f2f2f2;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

3. JavaScript 功能：
   • 监听表单的提交事件。
   • 获取输入框的值，并将其添加到列表中。
   • 监听列表项的点击事件，实现删除和编辑功能。

document.getElementById('todo-form').addEventListener('submit', function(event) {
  event.preventDefault();
  var input = document.getElementById('todo-input');
  var text = input.value.trim();
  if (text !== '') {
    var li = document.createElement('li');
    li.textContent = text;
    document.getElementById('todo-list').appendChild(li);
    input.value = '';
  }
});

document.getElementById('todo-list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.remove();
  }
});

扩展阅读

想要了解更多关于 JavaScript 的知识？可以阅读我们提供的 JavaScript 教程。

希望这个教程能帮助你掌握 Todo List 项目的制作！🎉