来做一个简单的 To-do List 吧！（下）

前言

接续昨天的部分，今天要继续实作完成事项区的功能，那就直接开始罗～

将完成事项回复到待办状态

目标：当点选到文字或是勾勾图示，该笔事项就会放回待办事项区

function restorePendingState (e){
  // 选出该笔事项
  const list = e.target.closest('li');  
  
  //判断点选的位置是否为文字或勾勾图示
  if (e.target.tagName === 'INPUT' || e.target.classList.contains('check') ) {
    list.remove(); // 移除完成区的事项
    
    //建立新的元素并加入内容
    const itemUnfinished = document.createElement('li');
    const content = list.children[0].value;
    itemUnfinished.innerHTML += `<input value ="${content}" class="">
    <div class="icon-group">
      <i class="delete fa fa-trash"></i>
      <i class="check fa fa-check-circle"></i>
    </div>`
    
    // 放回待办事项区
    pending.appendChild(itemUnfinished);
  } else {
    return;
  }
}

删除完成事项

function remove(e) {
  //点选到垃圾桶图示就删除该笔资料
  if (e.target.classList.contains('delete')) {
    const list = e.target.closest('li');
    list.remove();
  } else {
    return;
  }
}

对完成事项区域绑定事件监听器

done.addEventListener ('click', restorePendingState);
done.addEventListener ('click', remove);

中场小反思

仔细的读者可能会注意到昨天在实作待办事项区域的删除和勾选完成功能时，是将这两个行为放在一个changeState的函式中，为何今天又将这两个功能拆开成各自的函式呢？

纯粹是因为笔者没有好好思考(跪)

只要两相比较就会发现昨天的函式命名方式过於笼统，虽然删除和勾选完成都可以被状态改变的概念涵盖，但无法一眼就看出这个函式负责什麽功能

如何拆分函式真的是一个大学问，对於新手菜菜如我，也常常很苦恼，以下推荐在这次铁人赛读到觉得很棒的文章，分享给跟我有一样困惑的朋友～
Function 时空旅行 (2) - 拆解与命名

最後的小小优化

考虑到使用者打完字会自然使用 Enter 键做输入，因此今天新增小功能，让使用者输入完按 Enter 键，就能新增待办事项

document.addEventListener('keypress', function(e){
  let inputValue = input.value;
  if (e.code === "Enter" && inputValue.trim().length > 0) {
      addTodo(inputValue);
      input.value = "";
   }
})

比较 KeyboardEvent.keyCode 以及 KeyboardEvent.code

MDN提醒 KeyboardEvent.keyCode 特性已被弃用，可以的话要避免使用，建议改用 KeyboardEvent.code，在程序码阅读上KeyboardEvent.code 也比较一致，不需要再思考数值和按键的关系

• KeyboardEvent.keyCode : 回传数值，字母大小写回传值不一样
• KeyboardEvent.code : 回传值会与按键产生的值相符，不会受键盘布局影响，不区分大小写

可以在 console 输入以下程序码再按键盘就可以看出两者的区别了～～

document.addEventListener('keypress', function(e) {
  console.log(e.code);
  console.log(e.keyCode);
  }
)

完成～～ codepen连结

小结

这次的尝试让自己对於 To-do List 的流程和函式拆分有了个初步的概念，希望也能帮助到对 To-do List 实作完全没头绪的朋友～

参考资料：

KeyboardEvent.code - MDN
KeyboardEvent.keyCode -MDN