---
# System prepended metadata

title: 期末報告 - 待辦事項管理系統(To Do List)

---

# 期末報告 - 待辦事項管理系統(To Do List)
## 小組成員
組別：第三組
組長：四工管四Ａ B10621034 顏鈺芳
組員：四工管四Ａ B10521035 顏吉秀
組員：四電子四Ａ B10613022 邱柏崴

## 開發緣由
在現今資訊爆炸的時代，一天中要處理的事情極為繁雜，**人類的短期記憶容量非常有限，在一小時後會忘記 56%的事物；一天後會忘記 74%；一星期後只記住23%**，因此本組想開發一套待辦事項管理系統來解決上述問題。

市面上有許多記事功能的系統，如 Google 日曆，但其**大多數功能繁多，若單純使用待辦事項的系統，多數僅有記事功能，並沒有落實進度追蹤**，為了符合本組組員使用需求，故加入了進度追蹤功能、顏色及標籤控管等功能，提高使用率及有效管理待辦事項的成效。

## 撰寫工具介紹
### 開發環境
* Visual Studio Code
### 前端
* Bootstrap
* JavaScript
### 後端
* node.js express框架
* MySQL Workbench資料庫

## 專案結構
[專案樹狀圖連結](https://whimsical.com/tree-8MYvDcTjAEj117JaHqpp3C)


## 功能介紹
### 切換畫面檢視
>**提供三種不同的檢視畫面，日檢視、色彩檢視及標籤檢視**
>
![](https://i.imgur.com/V9z9rvI.jpg)

### 新增畫面
>**透過Bootstrap互動視窗 (Modal)顯示新增畫面**

![](https://i.imgur.com/g8gfOgf.jpg)

### 修改畫面
>**透過Bootstrap互動視窗 (Modal)顯示修改畫面**

![](https://i.imgur.com/YEwHJOg.jpg)

### 刪除畫面
>**透過Bootstrap互動視窗 (Modal)顯示刪除畫面**

![](https://i.imgur.com/lISyEoQ.jpg)

### 檢視他日待辦事項
>**透過點選月曆點擊，即可檢視他日待辦事項**

![](https://i.imgur.com/9yegqYo.jpg)

### 狀態完成畫面
>**透過點選checkbox後，狀態會修改為DONE且文字加上刪除線**

![](https://i.imgur.com/2YsZ55q.jpg)

### 當日進度顯示
>**上方進度條會根據今日的完成進度比例做調整**

![](https://i.imgur.com/DE6J2ID.jpg)

### 表單驗證功能
>**驗證方式：**
>(1) 開始日期、結束日期、待辦事項皆為必填欄位
>(2) 開始日期、結束日期不能小於當日
>(3) 開始日期不能大於結束日期
>(4) 結束日期不能小於開始日期

![](https://i.imgur.com/lWgm6Yj.jpg)

![](https://i.imgur.com/zmkq8xD.jpg)

![](https://i.imgur.com/ylz9hnM.jpg)

### 色彩檢視畫面
>**提供7種色彩供使用者做待辦事項分類**

![](https://i.imgur.com/Kr1sLfs.jpg)

### 標籤檢視畫面
>**提供標籤功能供使用者做待辦事項分類**

![](https://i.imgur.com/jAXHsdC.jpg)

### 修改刪除功能檢視
>**當使用者滑鼠移到此待辦事項，將會顯示此修改刪除功能區塊**

![](https://i.imgur.com/cPHvwRN.jpg)
