# 🗞 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 檔案](https://codepen.io/denilsonsa/pen/epmoma)。

## 問題

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

請同學 fork 此 👉 [ CSS 範本](https://codepen.io/hexschool/pen/KKmvpPP?editors=0010)，或使用已實現其他功能之 todoList ，今天要實作刪除全部&優化：


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

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

今天的範例投稿有兩份唷，在寫 Code 時，其實沒有所謂的標準解答，卡關時可以參考別人的程式碼，並融會貫通出自己的寫法唷！
## 回報流程
將答案寫在 CodePen 複製 CodePen 連結貼至下方作業投稿區中回報就算完成了喔!

## 作業投稿區(學員自行投稿)
1. [範例投稿一](https://codepen.io/jmkhsutp/pen/yLXYKJr?editors=0011)、[範例投稿二](https://codepen.io/WangShuan/pen/poeLoyp?editors=0010)（可點此連結觀看解答）
2. [shoppingq](https://codepen.io/shoppingq/pen/mdwrEMe)
3. [Yunei](https://codepen.io/Yunei/pen/eYRJMGw)
4. [Allen Lin](https://codepen.io/lcf7891/pen/mdwEppx)
5. [小韭菜](https://codepen.io/jhang-jhe-wei/pen/GREqxEq)
6. [肉鬆](https://codepen.io/klrkicog/pen/JjJKvrb)
7. [Jane Lin](https://codepen.io/as60160/pen/qBjbQrO)
8. [LMY](https://codepen.io/l_umei/pen/OJgNqgg)
9. [中年大叔](https://codepen.io/adens123/pen/qBjbJwe)
10. [詠銓](https://codepen.io/GGfish26/pen/wveGMjL?editors=0010)
11. [InchI](https://codepen.io/inchik-the-styleful/pen/VwWavNW?editors=0001)
12. [佳鈴](https://codepen.io/zpyfpsxa/pen/bGReMBx?editors=0010)
13. [AmberCYT](https://codepen.io/amberTing/pen/VwWjgBq?editors=1011)
14. [wind](https://codepen.io/wind7y/pen/eYRJaMr)
15. [Rain Liao](https://codepen.io/billpop741/pen/mdmYewW)
16. [黃士桓](https://codepen.io/shr-huan-huang/pen/JjJboLG)
17. [Howard](https://codepen.io/yawdnhbm/pen/gORLbye)
18. [DoraYu](https://codepen.io/dora-yu/pen/gORLwLW?editors=1010)
19. [Sandy](https://codepen.io/Sandy_L/pen/BaZjxVX?editors=0011)
20. [yojanni](https://codepen.io/unayo/pen/YzQWNGP?editors=1010)
21. [curry](https://codepen.io/Ted19851223/pen/VwWPGYJ)
22. [colinhyun](https://codepen.io/colinhyun/pen/wvegzgd)
23. [Hedy](https://codepen.io/babogooyache/pen/bGRpvjM)
24. [皮皮](https://codepen.io/super-shrimp/pen/oNwBdJj?editors=1011)
25. [Wei](https://codepen.io/tartle120/pen/OJgWbyv)
26. [peter](https://codepen.io/peter_hung/pen/gORvqXd)
27. [Joy Cheng](https://codepen.io/joycheng5432/pen/abwqgvE?editors=0011)
28. [Eileen](https://codepen.io/Eileen-Ching/pen/GRExJJy?editors=0011)
29. [ Margo](https://codepen.io/MargoMin/pen/xxrazov?editors=0010)
30. [Joe Kuo](https://codepen.io/alertislow/pen/vYZVNdm)
31. [肉魚](https://codepen.io/zoechen13/pen/RwgYapP?editors=1011)
32. [Tina Yen](https://codepen.io/tlorfrnl-the-typescripter/pen/PoJGdyp?editors=0010)
33. [Sunny](https://codepen.io/Sunny0509/pen/xxXEwGX?editors=1011)
34. [BrunoYu](https://codepen.io/bruno-yu/pen/YzrVMzr?editors=0000)
35. [int Huang](https://codepen.io/intHuang/pen/JjpKWzb?editors=0011)
36. [Peihan Wang](https://codepen.io/PeihanWang/pen/WNMpygy?editors=1111)
37. [Min](https://codepen.io/minnn7716/pen/zYREoLR)
38. [Cliff](https://codepen.io/Cliff_hex/pen/qBopRmd)
39. [CookieSSS](https://codepen.io/sqhjikpa-the-selector/pen/KKoRaeX?editors=1011)
40. [Alex](https://codepen.io/datsxzqg-the-selector/pen/MWGLmXZ?editors=1011)
41. [qoq77416416](https://codepen.io/qoq77416416/pen/oNyzagw?editors=1011)
42. [SASIMI](https://codepen.io/sashimi1327/pen/NWzzmMr)
43. [yunifer](https://codepen.io/yunifer1227022/pen/mdGeJLb?editors=1111)
44. [wei](https://codepen.io/Wei-the-sasster/pen/RwOgqyL?editors=1011)
45. [qqorzi](https://codepen.io/qqorzi/pen/QWXepZP)
46. [yuhao](https://codepen.io/tqdtaouh-the-styleful/pen/GgRvxJp?editors=1011)