JavaScript 课程 | 任务跟踪器项目

介绍

本项目是基于 JavaScript 的 Web 应用，实现了任务的增删改查功能，用户可以通过界面操作来管理自己的任务列表。本项目的主要目的是锻炼 JavaScript 程序员的编程能力和应用开发能力，同时也是一个练手的好项目。

技术栈

• HTML/CSS - 前端页面布局和样式设计
• JavaScript - 实现业务逻辑和后端开发
• Node.js - 用于搭建本地服务器和处理 HTTP 请求
• Express - 用于简化 Node.js Web 应用开发流程

实现功能

本项目实现了以下功能：

• 查看任务列表
• 添加新任务
• 修改任务状态
• 修改任务名称
• 删除任务

项目运行

如果您想要在本地运行此项目，请按照以下步骤进行操作：

1. 安装 Node.js 和 npm。
2. 克隆此仓库或下载并解压缩 zip 包。
3. 进入项目文件夹，并在命令行中输入以下命令：

npm install

4. 安装完所有依赖包之后，再输入以下命令启动本地服务器：

npm run dev

5. 打开浏览器访问 http://localhost:3000 即可查看任务跟踪器网页。

代码示例

下面是实现任务列表的 HTML 和 JavaScript 代码示例：

<div>
  <h2>任务列表</h2>
  <ul id="task-list"></ul>
</div>

<script src="main.js"></script>

let tasks = [];

function renderTaskList() {
  const taskList = document.getElementById("task-list");
  taskList.innerHTML = "";

  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.innerHTML = `
      <input type="checkbox" id="task-${index}" ${
      task.isComplete ? "checked" : ""
    }>
      <label for="task-${index}">${task.name}</label>
      <button onclick="editTask(${index})">编辑</button>
      <button onclick="deleteTask(${index})">删除</button>
    `;
    taskList.appendChild(li);
  });
}

function addTask(taskName) {
  const newTask = {
    name: taskName,
    isComplete: false,
  };
  tasks.push(newTask);
  renderTaskList();
}

function editTask(index) {
  const newName = prompt("请输入新的任务名称：", tasks[index].name);
  if (newName) {
    tasks[index].name = newName;
    renderTaskList();
  }
}

function deleteTask(index) {
  tasks.splice(index, 1);
  renderTaskList();
}

function toggleComplete(index) {
  tasks[index].isComplete = !tasks[index].isComplete;
  renderTaskList();
}

addTask("学习 JavaScript");
addTask("做一道 Leetcode 题目");

以上代码片段展示了如何使用 JavaScript 动态渲染任务列表，包括添加、删除、编辑和修改任务状态等功能。更多代码实现细节请参考 GitHub 代码仓库。