HackMD
必學 Todo List
JavaScript 必修篇 - 前端修練全攻略活動到了尾聲，開始實作一個 Todo List ，跟著艾草助教的步驟進行。
艾草提醒思考步驟
- 新增待辦事項
- 註冊監聽點擊按鈕事件：
- 必須選取 button
- 必須監聽 button 點擊事件
- 監聽函式內要先組物件，物件內包含：
- input 欄位的值(記得先取出)
- id (未來會需要透過 id 比對資料)
- 紀錄完成狀態(ckeckbox 有沒有打勾勾)
- 防呆，確認 input 欄位有值
- 有值的情況下，將剛組好的物件推到全域變數(記得宣告一個全域變數並賦予值為空陣列)
- 確認 HTML 結構，看要渲染的資料要擺在哪
- 宣告一個函式 render 用來渲染資料
- 將剛組好的資料拿來跑 forEach
- 將全域變數陣列內的 input 欄位值依需求擺放進要渲染的字串內
- id 、 紀錄完成狀態等資訊可以等後續用到時再來補埋
- 刪除單筆/切換打勾
-
監聽外層 ul 的點擊事件
- 取出點擊時該筆 li 的 id(此 id 需提前透過
data-"自定義名稱"埋進渲染的字串內)
- 取出點擊時該筆 li 的 id(此 id 需提前透過
-
刪除功能
- 確認點擊到的是打叉按鈕
- 找出點擊到的該筆資料的索引值
- 刪除該筆資料
-
切換打勾功能
- 確認點擊到哪筆資料（可透過 id 比對）
- 點擊時新增 "checked" 屬性至 input checkbox 內(需提前埋進渲染的字串內)
- 補充：input checkbox 的屬性 checked ，可以使 checkbox 呈現打勾
-
重新渲染
- 切換 tab &修改完成狀態
- 切換 tab：監聽是否點擊到全部/待完成/已完成區塊
- 取出埋藏的 tab 狀態（在 HTML 透過
data-"自定義屬性"埋藏 tab 的狀態） - 透過 querySelectorAll 選取所有 tab
- 先取消全部 tab 的 class 類別 active
- 給點擊到的 tab 新增 class 類別為 active
- 取出埋藏的 tab 狀態（在 HTML 透過
- 修改完成狀態
- 建立一個新函式處理修改完成狀態
- 透過 tab 狀態去判斷是否完成
- 透過判斷是否打勾來顯示對應資料(可使用 filter)
- 最後呼叫 render 函式渲染 filter 後的資料
- 將原先其他功能的 render 渲染函式呼叫取消，替換成呼叫此新函式
- 計算待完成項目
- 透過計算陣列中未打勾狀態的長度，計算待完成筆數
- 將筆數賦予到 DOM 節點上
- 刪除全部&優化
- 監聽點擊清除已完成項目按鈕
- 點擊後刪除已完成項目(可透過 filter 篩選出未完成項目後重新渲染)
- 優化：鍵盤事件 Enter 也能新增待辦事項
- 可透過監聽鍵盤事件
- 鍵盤按下 Enter 後呼叫新增待辦事項函式
- 可透過監聽鍵盤事件
- 刪除全部&優化
- 監聽點擊清除已完成項目按鈕
- 點擊後刪除已完成項目(可透過 filter 篩選出未完成項目後重新渲染)
- 優化：鍵盤事件 Enter 也能新增待辦事項
- 可透過監聽鍵盤事件
- 鍵盤按下 Enter 後呼叫新增待辦事項函式
- 可透過監聽鍵盤事件
Todo List Start !
補充
艾草： 如果真的想不出來卡關了，也不要灰心，這裡有可愛的 Vtuber 艾拉的 👉 todoList 教學 一天實作一點小功能，很快就完成囉
其他寫法
刪除 ：
todoList.addEventListener('click', deleteAndChecked);
function deleteAndChecked(e) {
let id = e.target.closest('li').dataset.id;
if (e.target.classList.value == 'delete') {
e.preventDefault();
// 篩選：我們需要的是 『點到的 ID 要刪除』
// i.id != id ，篩選『點到的ID 不是那個ID』
// 就會變成留下沒有點到的 ID
// 也就是刪掉點到的 ID
todoData = todoData.filter((i) => i.id != id);
} else {
// 切換 checked 狀態功能
todoData.forEach((i, index) => {
if (i.id == id) {
if (todoData[index].checked == 'checked') {
todoData[index].checked = '';
} else {
todoData[index].checked = 'checked';
}
}
});
}
updateList();
}
