创建简单Todo List应用指南

开发 Todo List, HTML, CSS, JavaScript, localStorage 01-18

如何实现一个简单的Todo List应用（基于HTML、CSS和JavaScript）

项目简介

在本篇文章中，我们将创建一个简单的Todo List（待办事项）应用。通过这个项目，您将学习如何用HTML构建页面结构，用CSS美化设计，并用JavaScript实现核心功能，如添加任务、删除任务和标记任务为完成状态。

目标功能

用户可以输入任务并将其添加到列表中。
用户可以删除不需要的任务。
用户可以标记任务为已完成并取消标记。
数据在刷新后不会丢失（使用浏览器本地存储）。

具体实现步骤

1. 创建文件结构

创建一个文件夹，包含以下三个文件：

index.html：页面结构。
style.css：页面样式。
script.js：逻辑功能。

2. 编写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="style.css">
</head>
<body>
  <div class="container">
    <h1>Todo List</h1>
    <div class="input-area">
      <input type="text" id="taskInput" placeholder="Enter a task">
      <button id="addTaskBtn">Add Task</button>
    </div>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

3. 添加CSS样式

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

.container {
  background: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

.input-area {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #0284c7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0369a1;
}

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

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

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

li button {
  background: none;
  border: none;
  cursor: pointer;
  color: #ff4b5c;
}

li button:hover {
  color: #e63946;
}

4. 编写JavaScript逻辑

// script.js

// 获取页面元素
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

// 加载本地存储中的任务数据
document.addEventListener('DOMContentLoaded', loadTasks);

// 点击添加任务按钮
addTaskBtn.addEventListener('click', addTask);

// 添加任务到列表
function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText === '') {
    alert('Please enter a task!');
    return;
  }

  // 添加任务元素
  const li = createTaskElement(taskText);
  taskList.appendChild(li);

  // 保存任务到本地存储
  saveTask(taskText);

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

// 创建任务元素
function createTaskElement(taskText) {
  const li = document.createElement('li');
  li.textContent = taskText;

  // 完成任务功能
  li.addEventListener('click', () => {
    li.classList.toggle('completed');
  });

  // 删除任务功能
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Delete';
  deleteBtn.addEventListener('click', () => {
    li.remove();
    deleteTask(taskText);
  });

  li.appendChild(deleteBtn);
  return li;
}

// 保存任务到本地存储
function saveTask(taskText) {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.push(taskText);
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

// 删除任务从本地存储
function deleteTask(taskText) {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  const filteredTasks = tasks.filter(task => task !== taskText);
  localStorage.setItem('tasks', JSON.stringify(filteredTasks));
}

// 加载本地存储中的任务
function loadTasks() {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.forEach(taskText => {
    const li = createTaskElement(taskText);
    taskList.appendChild(li);
  });
}

功能说明

HTML核心结构
HTML部分是应用的基础框架，包含一个任务输入框、一个添加按钮和一个用于显示任务的列表。
CSS样式定义
CSS用来美化界面，使Todo List看起来简洁、清晰，并且包含交互性的hover效果。
JavaScript逻辑实现
JavaScript负责核心逻辑：
- 添加新任务到列表中。
- 双击任务可以将其标记为"完成"。
- 删除任务按钮可以移除任务。
- 使用本地存储(localStorage)保存和加载任务数据，做到刷新后数据不丢失。

效果预览

完成上述步骤后，打开index.html文件，您将看到一个Todo List应用，用户可以添加任务、标记完成任务、删除任务并且数据会持久化存储。如果需要还可以基于此进一步扩展功能！

总结

通过这个项目，我们学习了如何将HTML、CSS和JavaScript相结合来构建一个简单的应用程序。同时，我们介绍了如何使用浏览器的本地存储功能来持久化数据。如果您希望继续练习，可以尝试添加复杂功能，例如任务排序、优先级分类等。这是您迈向前端开发的一个优秀起点！

编辑：一起学习网