---
# System prepended metadata

title: To do test

---

# To do test

Step1: (介面)
* 基本介面
* text 欄位事件
    * focus 事件觸發時，加上 -on class。
    * blur 事件觸發時，移除 -on class。


Step2: (介面)
* 新增待辦事項
    * 按下「新增」按鈕時，將待辦事項 html，新增到 ul.task_list 裡面的最前面。
    * 按下「新增」按鈕時，如果沒有輸入待辦事項，不能有任何反應。
    * 新增成功的話，待辦事項欄位要清空。
    * 輸入的待辦事項時，如果文字的最左邊、最右邊有空格，需移除。
    * 按下「Enter」鍵時，也要能新增待辦事項。

Step3: (資料)
新增資料至 localStorage

Step4: (資料)
從 localStorage 取得資料

Step5: (介面)
* 移除與清空
    * 按下「移除」按鈕，需詢問使用者是否要移除；若確定的話，ul.task_list 裡的第一層子元素 li 標籤，加上 fade_out 這個 class，就會淡出 1 秒，然後請移除該筆待辦事項。
    * 按下「清空」按鈕，需詢問使用者是否要清空；若確定的話，ul.task_list 裡的第一層子元素 li 標籤，加上 fade_out 這個 class，就會淡出 1 秒，然後請清除全部的待辦事項。

Step6: (資料)
移除 localStorage 裡的資料

Step7: (介面)
* 更新待辦事項
    * 按下「更新」按鈕，出現一般文字框，然後可以更新。
    * 再按下「更新」按鈕，回到不可編輯的狀態，但待辦事項要是更新的。
    * 如果所更新的待辦事項，沒有輸入文字，跳出提醒視窗(alert)，顯示「請輸入待辦事項」。
    * 待辦事項的文字若最左邊、最右邊有空格的話，需移除。

Step8: (資料)
更新 localStorage 中，name 的資料

Step9: (介面)
* 排序
    * 按下「往上」按鈕，與上面的待辦事項對調。(註：每個待辦事項是以 li 為單位。)
    * 按下「往下」按鈕，與下面的待辦事項對調。
    * 第一個的待辦事項，「往上」按鈕按了要沒反應；最後一個的待辦事項，「往下」按鈕按了要沒反應。

Step10: (資料)
更新 localStorage 中的排序

Step11: (介面)
* 重要性的星號
    * 點擊星號的時候，該星號加上 -on 這個 class，然後該筆待辦事項，星號數( data-star )小於等於點擊的星號數的話，也要加上 -on 這個 class；反之則移除。

Step12: (資料)
更新 localStorage 中，star 的資料
