项目简介

Todo List，顾名思义，就是Todo的List。 现在我们要设计一个网站，用于管理我们的待办事项（就是Todo List，中英文切换比较麻烦，以后就叫待办事项吧）。

每一个待办事项都包含以下属性：

• 事项名称（必须）
• 事项内容（可选）
• 截止时间（可选，不填写时认为截止日期为时间尽头）
• 级别（必须，可选范围为不急（gugu）、正常（normal）、加急（emergency），默认值为正常）
• 完成状态（已完成/未完成，默认为未完成）

网站需要实现以下功能：

• 选择按级别查看待办事项或按时间查看待办事项（Read: 具体实现见下文)
• 添加一个待办事项 (Create)
• 完成一个待办事项 (Update)
• 变更待办事项的名称、内容、截止日期 (Update)
• 删除一个待办事项 (Delete)
• 待办事项的存储功能（具体实现见下文）

设计上，网站需要满足以下条件：

• 响应式设计，即需要同时适配移动端（手机）和PC端
• 不能太难看
• 对于不同状态的待办事项（不同级别的事项、完成状态不同的事项）需要有不同的标注以方便用户快速了解该事项
• 对于截止时间与网页时间不超过一天的待办事项予以醒目标识（可选）

功能解释

功能分区

待办事项的创建和查看功能可以放在两个不同的网页上，也可以放在同一个网页上。注意如果放在多个网页上，这些网页的设计风格需要统一。

查看待办事项的方式

网站需要允许用户选择以何种方式查看待办事项（按级别/按时间），在查看待办事项的网页上需要有相关的功能按钮。

按级别查看

每一个级别的待办事项放在一个容器内，不同级别的待办事项容器需要有明显的分隔。相同级别的待办事项按时间排序。

按时间查看

所有待办事项放置在同一个容器内，按时间排序。注意此时对待办事项的级别应当有明确标识。

待办事项的存储功能

建议使用浏览器内的localStorage功能实现存储功能。此功能可以将网站的信息存在浏览器内，下次访问时可以通过localStorage相关的API取出。具体使用方式请自行搜索，可以参考MDN Docs和https://javascript.info。

其他要求

本项目对于网站开发使用的工具不限，一些参考工具如下。

CSS

• Bootstrap
• Bulma
• tailwindcss

JS

• jQuery
• undersocre.js