to-do-list-front-end

基本功能

本节练习我们将实现一款待办事项管理工具，效果请参考这里：To Do Items

1. 显示待办事项：

行为：

当用户通过URL链接进入待办事项管理工具时

结果：

1. 应用程序能够显示所有(已完成和未完成)待办事项。
2. 如果用户首次进入或用户没有添加任何待办事项时，待办列表为空。

2. 根据状态过滤待办事项：

行为：

当用户单击最下面的按钮(ALL, Active, Completed)时

结果：

1. 用户首次进入，ALL按钮默认选中。
2. 当ALL为选中状态时，展示所有的待办事项。
3. 当Active为选中状态时，展示所有未完成的待办事项。
4. 当Active为选中状态时，展示所有已经未完成的待办事项。

3. 新增待办事项：

行为：

在输入框中输入您的待办事项后，点击添加按钮或者回车键。

结果：

1. 当在输入框输入文字时，“Enter your to do item”将消失
2. 在待办事项列表最前面新增一条待办事项，默认状态为未完成。
   • 如果过滤状态为ALL和Active时，显示新增的待办事项。
   • 如果过滤状态为Completed时，不显示新的的待办事项。
3. 添加成功后，输入框清空，并显示“Enter your to do item”

4. 删除待办事项：

行为：

1. 当用户鼠标停留在某一条待办事项上时。
2. 当用户点击删除图标时。

结果：

1. 待办事项后面显示一个删除图标。
2. 该待办事项将从待办列表里面删除。

5. 修改待办事项：

行为：

1. 当用户在某一条待办事项上面双击时。
2. 修改完待办事项，单击回车键时。

结果：

1. 文本编程可修改文本，用户可以进行修改操作。
2. 待办事项修改成功。

仓库说明

1. 文件及文件夹说明：

index.html: 该文件为该项目的首页，也是该项目的启动进入文件。

js: 该文件夹为JS文件夹，从来处理相关的业务逻辑。

css: 该文件夹为样式文件夹，里面存放相关样式文件。

data: 该文件夹为数据处理文件，里面存放处理数据(请求和存储)的文件。

images: 该文件夹存放此项目用到的所有图片。

requirement.md: 该文件提供了为完成该程序所需要的所有知识点以及相关学习资料。

2. 分支说明：

master: 该分支为未实现分支，主要包括了所有已实现的脚手架代码，您需要基于此分支进行开发。

answer-localstorage: 该分支基于web localstorage, 实现了项目所有需求，如果您在master分支上面实现功能时遇到了困难，您可以切换到该分支上面进行参考。

answer-fetch-service: 该分支用于向服务端发送请求，实现该应用程序的基本业务逻辑。使用该分支时，您需要在js/fetch-service.js文件里面修改请求服务的地址。

你该怎么做？

1. 将该项目fork到您的账户下面。

2. 将fork后的代码仓库clone到您的本地。

3. 使用前端编辑器进行开发。

4. 完成后push您的代码，修改.gitlab-ci.yml文件的only为master，搭建gitlab pages。

5. 通过相关URL，访问您搭建的gitlab pages。

其他说明：

1.如果自己还不具备完成该程序的知识，哪里可以学习？ 由于学员水平不一，如果您觉得自己能够完成所有的功能，那就最好了，直接开干就行了！如果您发现自己有些代码看不明白或者是某个知识点不清楚，您可以以requirement.md列举的知识点和材料进行学习，加油哦！