progress 태그를 이용한 진행상황 보고

챌린지를 진행했던 다른사람들의 작품을 참고하다가 또 발견한 기능이. 리스트를 추가할때마다 그리고 완료할때마다 몇개나 남았는지 시각적으로 알려주는 기능이다. 살펴보니 progress tag를 html에 사용하였고 js 기능을 추가하면 될 것 같았다.

적당한 위치를 보다가 todo input 밑이 좋을 것 같았다.

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

max갯수 중에 value가 차지하는 비율에 따라 prgress가 나타난다. 그리고 count_pending에는 현재 pendinglist의 갯수를 숫자로 표시하고 싶었다. 그럼 생각나는게 childElementCount 함수였다. 로직은 pedninglist + 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!`;
  }
}

그리고 submit 할때마다, 버튼을 누를떄 마다 실행되서 반영되야 하기에 sumit , 모든 버튼의 함수에 progress()를 추가해주면된다.