前两周的基础学习，内容稍微多了一点。

了解基本语法，在网页开发中结合 DOM 的使用，以及其它的像本地存储这样的高级功能。

这周，咱们来实战。

选择来练手的项目，是任务管理系统 。

结合前面学习过 HTML、CSS，一起来搭建一个简单的我的任务管理系统 。

在练手的过程中，我们采用循序渐进的方式，一步一步完善我的系统。

成果展示

先来看一下实现的过程。

基本功能实现：

加上了 CSS 美化：

添加了本地存储，注意最后的刷新，刷新时任务不再消失，因为存储在了本地存储里：

添加优先级：

添加标签及过滤：

这一步步实现的过程还是很直观的吧。

还是有很多能学的和应用的东西，那就一起来看看需求和基于需求分析的任务拆解。

项目目标

项目目标很明确，大体如下：

• 提供一个用户友好的界面，允许用户添加、删除任务和设置任务为完成状态。

• 实现任务的优先级设置。

• 提供任务标签分类和标签过滤功能。

主要功能

1. 任务的创建和管理：

• 用户可以通过输入任务名称来创建新任务。

• 用户可以删除不再需要的任务。

• 用户可以将任务标记为完成。

2. 任务的优先级设置：

• 用户可以为任务设置优先级（如高、中、低）。

• 不同优先级使用不同的标识。

3. 任务的标签和过滤：

• 用户可以为任务设置不同的标签分类（如工作、个人、购物等）。

• 用户可以根据标签过滤任务列表。

实现过程

上述的梳理相对已经明确了，再细分下来的话分七天来完成。

每天的实现如下：

第一天：也就是今天，向大家展示了最终的成果，以及需求的简单描述。希望你能清楚我们即将实现的系统是什么样的，有什么功能。

第二天：开始搭建项目框架，引入基本的 HTML、CSS 和 JavaScript 完成项目结构。

第三天：完成基本功能，也就是任务的添加，删除，完成状态更新。

第四天：对系统界面进行一定的美化。

第五天：使用本地存储存储创建的任务。

第六天：为任务添加优先级管理，对于不同的优先级，显示不同的颜色。

第七天：为任务添加标签并基于标签过滤。

上述七天的内容，以增量方式进行，建议大家从一开始就打开 VS Code 一起来实现，相信最终肯定会有所收获。

那么明天再见吧。