新手学习JavaScript：day30 - Todolist（3）与完赛心得

嗨！大家好，昨天我们有提到，一开始两个区域有「目前没有新的任务」以及「尚未有任务完成」，这两个标题都没有做处理，今天就来处理这个问题吧！

当有任务时去除任务区与完成区的标题

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刷题中有留言分享的邦友。这个新手系列其实还有非常多可以写，例如：事件、闭包、同步与非同步、原型链等等，那接下来我还是会持续的自我挑战下去，可能是三天一篇，或是每个礼拜一篇，然後这里的文章会重新做一次整理搬到个人部落格，就请大家敬请期待吧！

最後完成铁人赛不是结束，而是开始！