家常菜

今天練習了一道每個開發者都會作的家常菜：todo list

這道家常菜作法有很多，我用的都是最簡單、家裡最容易取得的食材，用最基本的作法，希望在這個不太冷的冬天中，能分享給我們這些菜鳥開發者一起取暖取暖，成品也附在最下面，供大家試吃，不用錢。

作法及步驟：

1. 點按鈕就會新增項目(用creatElement())。
2. 將特定文字加入新增項目(把input轉成text node元件後，用.appendChild加入list當中)。
3. 將輸入區的文字帶入新增項目(用input.value的屬性)。
4. 判斷輸入區有文字才能帶入新項目。
5. 監聽輸入的是enter也能新增項目(用 addEventListener (“keypress”,function)，enter的keycode是13)。
6. 監聽列表是否被點擊，並將被點擊的項目指定切換刪除線格式(用classList.toggle()的方法來作)。
7. 新增新項目時，將按鈕也一起帶入新增項目(建立delete button，然後加入list當中)。
8. 監聽條件修改，監聽到文字就切換刪除線，監聽到刪除鍵，就刪除項目。(刪除父項目用target.parentElement.remove()的方法)。
9. 補上新增新項目時，要將新項目的刪除鍵設定為被監聽的對象。(重新querySelectAll所有項目，然後將最後一個element設為監聽)。

最後當然要灑個蔥花，注意一點點小細節就好了：

1. .appendChild的argument只能是element，所以文字要用.creatTextNode轉成text node的element才能被加入list裡。
2. 按鈕也一起帶入新增項目會造成點前面的文字產生刪除線時，也會造成button的文字一起產生刪除線。解決方式是，將前面的文字用一個span包住，用if判斷，只有點到span才給他刪除線。
3. .addEventListener在監聽的時候，所有的母、子元件都會一起監聽，所以要用.target來選子元件，.currentTarget來選父元件。
4. 新增的list的刪除鍵沒有產生刪除項目的功能，主要是因為新增的按鈕沒被監聽，所以新增list時，要去將新的按鈕設定成監聽狀態。
5. 而設定新增按鈕被監聽時，會發現找不到新增的按鈕可以被設定，所以需要重新用.querySelectorAll，以更新選擇所有的按鈕。

我們可以發現，這麼大家習以為常的家常菜，實作的時候，竟然需要替饕客設想這麼多的細節。大家在滑臉書逛網頁時，可能也沒想到每個網頁都是碼農的血汗之作，每個按鈕粒粒皆辛苦吧？

試玩：家常菜「待讀書單」

詳細中文註解原始碼