构建简单的Todo List应用

开发 Todo List, JavaScript, HTML, CSS, 前端项目 02-02

构建一个简单的Todo List应用：从需求到实现

在这篇文章中，我们将通过构建一个简单的Todo List应用来探讨如何通过合理的步骤和代码实现一个实用的前端项目。Todo List是一个经典的编程课程练习项目，通过实现它可以全面掌握HTML、CSS和JavaScript的实际应用。

步骤1：确定需求

在开始编码之前，首先需要明确项目的基本需求：

能够添加新任务。
能够标记任务为完成状态。
能够删除任务。

步骤2：HTML结构

首先，我们需要一个基本的HTML结构来放置我们的Todo List。HTML的目的在于构建应用的骨架。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo List</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app">
    <h1>My Todo List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task...">
    <button id="addTaskBtn">Add Task</button>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

步骤3：CSS样式

接下来，添加一些基本的CSS样式，以使我们的应用更具吸引力和可用性。

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

#app {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 300px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

#taskInput {
  width: calc(100% - 22px);
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

#addTaskBtn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: 20px;
}

#addTaskBtn:hover {
  background-color: #218838;
}

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

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

li.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

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

步骤4：JavaScript功能实现

最后，我们使用JavaScript来实现Todo List的核心功能。

document.addEventListener('DOMContentLoaded', () => {
  const taskInput = document.getElementById('taskInput');
  const addTaskBtn = document.getElementById('addTaskBtn');
  const taskList = document.getElementById('taskList');

  // 添加任务事件
  addTaskBtn.addEventListener('click', () => {
    const taskText = taskInput.value.trim();
    if (taskText) {
      const li = document.createElement('li');
      li.textContent = taskText;
      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = 'Delete';
      deleteBtn.className = 'delete';

      li.appendChild(deleteBtn);
      taskList.appendChild(li);

      taskInput.value = '';

      // 完成任务点击事件
      li.addEventListener('click', () => {
        li.classList.toggle('completed');
      });

      // 删除任务点击事件
      deleteBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        taskList.removeChild(li);
      });
    }
  });
});

结论

通过上述步骤，我们已经成功创建了一个简单的Todo List应用。这涵盖了前端开发中的基本组件：HTML用于结构，CSS用于样式，JavaScript用于交互。掌握这些基本技能将为您进军更复杂的项目打下坚实的基础。

编辑：一起学习网