# Vue TodoList Assignment
## User Story
- 我可以 新增/編輯/刪除 待辦事項
- 我可以透過 filter 分別篩選出 所有/未完成/已完成 的待辦事項
- 我可以將待辦事項標註成已完成的狀態

## Functions
此 application 的 UI 主要分為兩個部分
- 待辦事項輸入框
- 待辦事項列表
- 待辦事項

### New Todo
頁面上會有一個 input element，輸入待辦事項的內容之後按下 Enter，會新增待辦事項，在待辦事件列表上增加一個項目，並且將 input 內容清除

### Delete Todo
若 hover 待辦事項則會在此項目上出現刪除的按鈕，按下按鈕之後直接刪除此項目

### Edit Todo
double click 待辦事項，會變成編輯模式，可以編輯待辦事項內容，按別處之後(blur)完成編輯

### Filter
有三個按鈕 所有/未完成/已完成，按下按鈕之後可以分別在代辦事項列表中，篩選出個別狀態的待辦事項，ex: 若按下已完成按鈕，則列表中只顯示已完成的事項

### Mark todo as complete
在待辦事事項裡會有一個 checkbox，check 之後表示此待辦事項已完成

## 如何完成作業
1. 將此 [template](https://drive.google.com/drive/folders/1ZhYGZg2Xr9oLCkmtrI3ALAlcaWuem85e?usp=sharing) 下載下來進行修改
2. 只需製作一個頁面就好，不需要使用 router
3. 可以不需要使用 vue component
4. Todo List 可以儲存在 localStorage
5. UI 呈現上沒有提到的部分可以自由發揮，但從簡就好

## 參考資料
[Vue js 官網](https://vuejs.org/)

## 如何繳交作業
在 **11/2（六）10:00 pm** 前將檔案寄到 [e-mail]，檔名 `yourChineseName-easychat-assignment.html`。若有任何疑問可以用上面的 email 跟我們聯絡。
二次面試的時候我們會跟你討論你在實作這個 project 時的心得，跟一些實作的細節。期待與你的第二次面試！