進捗ラベルを使用して進捗状況をレポートする

チャレンジしている他の人の作品を参考にして見つけた機能これは、リストを追加するたびに、完了するたびに、どれだけのリストが残っているかを視覚的にユーザーに伝える機能です.私はprogress tagをhtmlに使用して、js機能を追加すればいいです.
適当な位置を見て、todoinputの下がいいはずです.

<div class="progress">
  <div class="count_pending"></div>
  <progress id="progress_bar" value="" max=""></progress>
</div>

最大数では、valueが占める割合に基づいてprgrressが表示されます.そしてcount pendingは現在のpendinglistの数を数字で表したい.ではchildElementCount関数について考えますロジックはpedinglist+finishedlistの個数をmaxに、finishedlistの個数をvalueに入れることができます.

const pendingList = document.getElementById("js_pending"),
  finishedList = document.getElementById("js_finished"),
  progessDiv = document.querySelector(".progress"),
  countPending = progessDiv.querySelector(".count_pending"),
  progressBar = document.getElementById("progress_bar");

function progressFunction() {
  if (pendingList.childElementCount || finishedList.childElementCount) {
    // html 에 pending, finished 가 있을 경우 아래의 코드를 실행
    countPending.innerHTML = `${pendingList.childElementCount} more to go`;
    progressBar.max =
      pendingList.childElementCount + finishedList.childElementCount;
    progressBar.value = finishedList.childElementCount;
    if (pendingList.childElementCount === 0) {
      // 그리고 pendinglist 갯수가 없으면 끝났다고 알려줌
      countPending.innerHTML = `Finished!! Let's go out and enjoy your life! 😆`;
    }
  } else {
    // 아무것도 없으면 "너의 삶을 살아라" 고 나타남
    countPending.innerHTML = `Nothing to do. Enjoy your life!`;
  }
}

また、コミットするたびにボタンを押すたびに実行され反映されるので、sumit、すべてのボタンの関数にprogress()を追加できます.