嗨！大家好，昨天我們有提到，一開始兩個區域有「目前沒有新的任務」以及「尚未有任務完成」，這兩個標題都沒有做處理，今天就來處理這個問題吧！

當有任務時去除任務區與完成區的標題

1. 在新增任務得時候我們把任務區的標題隱藏,所以要在表單提交時隱藏就好

  addTodoElement().todoForm.addEventListener("submit",(e)=>{
    e.preventDefault();
     
      document.querySelector(".no-new-task").style.display = "none" 
      // 加上這一行，將標題隱藏
  })

2. 當任務都被刪掉或是任務區沒有任務的時候我們要顯示出來，所以當我們在點擊刪除時我們要知道目前任務區還有沒有任務

addTodoElement().todoListArea.addEventListener("click",(e)=>{
  if(e.target.classList[1] === "fa-trash-alt"){
    setTimeout(()=>{
      if(document.querySelectorAll(".todo-list .task").length === 0){
        document.querySelector(".no-new-task").style.display = "block"
      }
    },10)
    //在刪除的時候增加這一段，偵測任務區還有沒有任務
    e.target.parentNode.parentNode.remove()
  }
})

3. 同理當我們點擊完成按鈕時也要知道任務區有沒有任務，如果沒任務也讓任務區標題出現，並且如果有任務是被完成的，那就讓完成區的標題隱藏

addTodoElement().finishedButton.addEventListener("click",(e)=>{
  // e.preventDefault()
  setTimeout(()=>{
    if(document.querySelectorAll(".todo-list .task").length === 0){
      document.querySelector(".no-new-task").style.display = "block"
    }
  },10)
  //在點擊按鈕事件加上這一段，偵測任務區還有沒有任務
  
  if(checkedTasks.length !== 0){
    document.querySelector(".no-finished-task").style.display = "none"
  } //有完成的任務，讓完成區標題隱藏
}

這樣子我們Todolist就完成的差不多了，但其實還有一個問題，就是完成區的任務是沒辦法刪除跟取消劃掉線條的，這個功能其實跟監聽任務區的作法是相同的，就不贅述。完成區的功能就留給大家自由發揮啦！

以上就是Todolist的實作，寫法上如果有不妥或是需要改進的地方，還請大家不要吝嗇的在下方留言告訴我，如果跟我一樣是新手，也可以在下方留言互相交流。

那鐵人賽最後一天就到這邊了，這30天從0邁向1的過程中，深刻的體會到這個邁向1的路程是非常的遙遠，自己還有非常多的東西需要去瞭解跟練習，謝謝這30天身邊同學及老師的鼓勵，以及在短短7天leetcode刷題中有留言分享的邦友。這個新手系列其實還有非常多可以寫，例如：事件、閉包、同步與非同步、原型鏈等等，那接下來我還是會持續的自我挑戰下去，可能是三天一篇，或是每個禮拜一篇，然後這裡的文章會重新做一次整理搬到個人部落格，就請大家敬請期待吧！

最後完成鐵人賽不是結束，而是開始！