18. 시간 덧셈 🕗

목표

동영상의 길이를 모두 더해서 출력해 보자.

스크립트 작성

위와 같은 식으로 구성된 HTML에서 시간을 추출해서 더하면 된다.

우선 li를 모두 추출한 다음 배열로 만들어서 data-time을 담은 배열을 만들었다. querySelectorAll은 선택자에 해당하는 요소를 모두 담은 NodeList를 반환하는데, Array.from()을 이용해서 배열로 만들었다. data로 시작하는 커스텀 속성은 dataset으로부터 받아올 수 있다.

시간은 mm:ss 형식의 문자열로 표현되는데, 이를 초 단위로 변환해서 새로운 배열에 저장했다.

정리한 값은 reduce를 이용해 합쳐줬고 시간 형식으로 표현하기 위해 h, m, s 단위로 쪼개서 출력했다.

이번 과제도 dataset과 reduce를 이용할 줄 알면 너무 간단했다. 오늘은 밀린 노션 정리를 해봐야겠다.

소스 코드

Visit Github Repository