在实际的工作和生活中，我们会有很多的任务，这些任务往往错综复杂，很多时候我们都顾此失彼。”Task Manager“是一款方便任务管理的工具，让你完成任务的过程变得高效而简单，充满成就感！今天我们就用我们学习过的技术HTML、CSS、JavaScript来做一款这样的任务管理工具。这里是简单的demo，你可以参考：Task Manager.
下面是”任务管理器“的主要功能：
当用户通过链接进入任务管理页面，将展示如下界面：
从上到下，分为三块：
这一块主要是展示此任务管理器的名称。
这一块主要展示对所有任务的统计，总共分为四个卡片，从左到右依次是：
- ALL Task： 所有任务的的统计数，点击此卡片，任务列表区将展示所有的任务。
- Active Task: 展示所有状态为”激活(Active)“的任务及其占比，点击此卡片，任务列表区将展示所有激活的任务。
- Padding Task：展示所有状态为”进行中(Padding)“的任务及其占比，点击此卡片，任务列表区将展示所有进行中的任务。
- Closed Task：展示所有状态为”已完成(Closed)“的任务及其占比，点击此卡片，任务列表区将展示所有已完成的任务。
此区域分为两部分，上面的工具栏(搜索和新增)和下面的列表展示栏。工具栏我们下面再做介绍，这里主要介绍列表展示栏：
当用户进入该任务管理器页面，列表展示区将展示所有的已经存在的任务，包括：
- 任务编号(#): 对任务的编号，从1开始。
- 任务名称(Task Name)：任务的名称。
- 任务描述(Task Description): 对任务的描述，如果太长，一行显示不下，请使用省略号(...)来表示，当鼠标悬停在此列上面时，将展示所有的任务描述。
- 任务截止完成事件(Deadline): 显示任务的截止完成时间。
- 任务的状态(Status): 显示任务的当前状态，注意不同的状态有不同的展示颜色。
- 对任务的操作(Operation): 包括删除和修改某个具体的任务。后面将详细介绍。
任务列表区的工具栏分为两个部分，一个是根据任务名称进行搜索的搜索框以及搜索按钮，另一个是新增任务按钮。
当用户在输入框中输入一些字符，按回车键或者点击后面的搜索图标，任务列表展示栏将显示任务名称包含搜索字符的所有任务。此搜索对大小写不敏感。
当用户点击工具栏中的新增按钮时，弹出如图所以新增任务的输入框，用户填完任务名称，截止日期和描述之后，点击确认按钮，新增任务输入框消失，任务列表中第一条将显示新增的任务。默认情况下，新增任务的状态为”Active“。如果用户单击取消按钮或者右上角的关闭按钮，那么新增任务输入框将消失，不会新增任务。
特别注意，我们需要对新增任务的名称，截止日期，描述做非空的检验，如果用户没有输入任务字符，将无法创建任务，同时为空的输入框的边框将显示为红色，提示用户输入信息。同时，截止日期的格式为：YYYY-MM-DD，也要做相应的校验。
对单个任务的操作通常有两种：删除和修改。
当用户单击任务列表中任何一个任务的Operation列中的删除按钮，将弹出上图所示的删除任务的模态框，将显示即将删除的任务名称。用户如果单击确定按钮，删除任务的模态框将消失，对应的列表区将消失该任务。如果用户单击取消按钮或者右上角的关闭按钮，模态框将消失，不会删除该任务。
当用户单击任务列表中任何一个任务的Operation列中的修改按钮，将弹出上图所示的修改任务的模态框，用户可以更改任务的名称，截止日期，状态，描述。用户如果单击确定按钮，修改任务的模态框将消失，对应的列表区的该任务将更新。如果用户单击取消按钮或者右上角的关闭按钮，模态框将消失，不会修改该任务。
特别注意，我们需要对新增任务的名称，截止日期，描述做非空的检验，如果用户没有输入任务字符，将无法创建任务，同时为空的输入框的边框将显示为红色，提示用户输入信息。同时，截止日期的格式为：YYYY-MM-DD，也要做相应的校验
列表区的表头上，任务名称、截止日期和任务状态右边有对应的排序按钮，用户单击对于的排序按钮，将按照下面规则进行排序：
- 任务名称和状态：单击向上的图标，按照ASCII码正序的方式排序，该图标高亮。单击向下的图标，按照ASCII码倒叙的方式排序，该图标高亮
- 截止日期：单击向上的图标，按照截止如期从近到远的方式排序，该图标高亮。单击向下的图标，按照截止日期由远到进的方式排序，该图标高亮。
完成上面的功能之后，Task Manager就可以使用啦！