🗞 9/3(五) todolist 刪除全部&優化

tags: JavaScript 必修篇 - 前端修練全攻略

本日對應章節為：todolist 待辦事項、陣列資料操作、箭頭函式基本寫法。

觀念補充

鍵盤事件 - keyup

鍵盤事件 keyup 可以拿來偵測是否按下特定鍵盤，而 keyup 的觸發時機為當你按下特定鍵盤又放開的那刻：

<input type="text">







//透過 querySelector 選取 input 欄位
const input = document.querySelector('input');
//註冊監聽 input 欄位的 "keyup" 事件
input.addEventListener("keyup", function (e) {
    console.log(e);
  });

當我點擊 Enter 鍵觸發該 "keyup" 事件時，可以觀察到 Event 包含：

該 "keyup" Event 內相當多的屬性，如果我們希望點擊到 Enter 時，可以觸發對應事件，可以透過以下方式：









//註冊監聽 input 欄位的 "keyup" 事件
input.addEventListener("keyup", function (e) {
    //如果屬性的 key 值為 "Enter" 
    if (e.key === "Enter") {
    //符合條件就執行大括號內程式碼
        console.log('我鍵盤按了 Enter ')
    }
});

想多了解鍵盤事件怎麼觸發，可以點擊此 CodePen 檔案。

問題

此為最終關卡任務，為了給同學更多實作空間，此次會縮減步驟指引，改以大方向提示的方式唷！

請同學 fork 此 👉 CSS 範本，或使用已實現其他功能之 todoList ，今天要實作刪除全部&優化：

重點提示：

  • 監聽點擊清除已完成項目按鈕
    • 點擊後刪除已完成項目(可透過 filter 篩選出未完成項目後重新渲染)
  • 優化：鍵盤事件 Enter 也能新增待辦事項
    • 可透過監聽鍵盤事件
      • 鍵盤按下 Enter 後呼叫新增待辦事項函式

如果真的想不出來卡關了，也不要灰心，這裡有可愛的 Vtuber 艾拉的 👉 todoList 教學 一天實作一點小功能，很快就完成囉！ヽ(✿ﾟ▽ﾟ)ノ

今天的範例投稿有兩份唷，在寫 Code 時，其實沒有所謂的標準解答，卡關時可以參考別人的程式碼，並融會貫通出自己的寫法唷！

回報流程

將答案寫在 CodePen 複製 CodePen 連結貼至下方作業投稿區中回報就算完成了喔!

作業投稿區(學員自行投稿)

  1. 範例投稿一、範例投稿二（可點此連結觀看解答）
  2. shoppingq
  3. Yunei
  4. Allen Lin
  5. 小韭菜
  6. 肉鬆
  7. Jane Lin
  8. LMY
  9. 中年大叔
  10. 詠銓
  11. InchI
  12. 佳鈴
  13. AmberCYT
  14. wind
  15. Rain Liao
  16. 黃士桓
  17. Howard
  18. DoraYu
  19. Sandy
  20. yojanni
  21. curry
  22. colinhyun
  23. Hedy
  24. 皮皮
  25. Wei
  26. peter
  27. Joy Cheng
  28. Eileen
  29. Margo
  30. Joe Kuo
  31. 肉魚
  32. Tina Yen
  33. Sunny
  34. BrunoYu
  35. int Huang
  36. Peihan Wang
  37. Min
  38. Cliff
  39. CookieSSS
  40. Alex
  41. qoq77416416
  42. SASIMI
  43. yunifer
  44. wei
  45. qqorzi
  46. yuhao
Select a repo