Exercise_FilterMapReduce_1.html

<p>Filter Map & Reduce in Javascript</p>

  <h3>My Videos</h3>
  <ul>
    <li data-duration="15:27">Programming Techniques</li>
    <li data-duration="11:18">JAVASCRIPT ADVANCE | Higher Order Functions</li>
    <li data-duration="21:40">JAVASCRIPT ADVANCE | This pada Arrow Function</li>
    <li data-duration="19:38">Scamming Website</li>
    <li data-duration="12:10">JAVASCRIPT ADVANCE | Arrow Function</li>
    <li data-duration="20:43">JAVASCRIPT ADVANCE | Closure</li>
    <li data-duration="14:30">#Q&A EP005</li>
    <li data-duration="26:38">JAVASCRIPT ADVANCE | Execution Context</li>
    <li data-duration="17:33">JAVASCRIPT ADVANCE | Prototype</li>
    <li data-duration="10:39">JAVASCRIPT ADVANCE | Object.create()</li>
    <li data-duration="17:31">JAVASCRIPT ADVANCE | Object (Revisited)</li>
    <li data-duration="14:25">5 Tips To Resolve Error</li>
  </ul>

  <h3>My Playlist</h3>
  <ol>
    <li>
      <h4>Javascript Lanjutan</h4>
      <p>Jumlah Video : <span class="jumlah-video"></span></p>
      <p>Jumlah Video : <span class="jumlah-video1"></span></p>

      <p>Total Durasi : <span class="total-durasi"></span></p>
      <p>Total Durasi : <span class="total-durasi1"></span></p>

    </li>
  </ol>

<script>

// ambil semua elemen video
const videos = Array.from(document.querySelectorAll('[data-duration]'));
console.log(videos.length);

// pilih hanya yang 'JAVASCRIPT ADVANCE'
const jsLanjut = videos.filter(video => video.textContent.includes('JAVASCRIPT ADVANCE'))

// ambil durasi masing2 video
.map(item => item.dataset.duration)

// ubah durasi menjadi int, ubah menit menjadi detik
.map(item => item.split(":"))
.map(item => (parseInt(item[0]) * 60 + parseInt(item[1])))

// jumlahkan semua detik
.reduce((acc, cur) => acc + cur);

// ubah formatnya jadi jam menit detik
function convertHMS(value) {
    const sec = parseInt(value, 10); // convert value to number if it's string
    let hours   = Math.floor(sec / 3600); // get hours
    let minutes = Math.floor((sec - (hours * 3600)) / 60); // get minutes
    let seconds = sec - (hours * 3600) - (minutes * 60); //  get seconds
    // add 0 if value < 10; Example: 2 => 02
    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds; // Return is HH : MM : SS
}

let durasi = convertHMS(jsLanjut);

// simpan di DOM


let x = document.getElementsByClassName("jumlah-video");
  x[0].innerHTML = videos.length;

const jmlVideo = videos.filter(video => video.textContent.includes("JAVASCRIPT ADVANCE")).length;
const pJmlVideo = document.querySelector(".jumlah-video1");
pJmlVideo.textContent = `${jmlVideo} video`;


let y = document.getElementsByClassName("total-durasi");
  y[0].innerHTML = durasi;
const pDurasi = document.querySelector(".total-durasi1");
pDurasi.textContent = `${durasi}`;
console.log(durasi);

</script>