JSFiddle - React, Tailwind, and code Playground

by Rodney Golpe

HTML

<ul>
  <li data-time="5:17">Flexbox Video</li>
  <li data-time="8:22">Flexbox Video</li>
  <li data-time="3:34">Redux Video</li>
  <li data-time="5:23">Flexbox Video</li>
  <li data-time="7:12">Flexbox Video</li>
  <li data-time="7:24">Redux Video</li>
  <li data-time="6:46">Flexbox Video</li>
  <li data-time="4:45">Flexbox Video</li>
  <li data-time="4:40">Flexbox Video</li>
  <li data-time="7:58">Redux Video</li>
  <li data-time="11:51">Flexbox Video</li>
  <li data-time="9:13">Flexbox Video</li>
  <li data-time="5:50">Flexbox Video</li>
  <li data-time="5:52">Redux Video</li>
  <li data-time="5:49">Flexbox Video</li>
  <li data-time="8:57">Flexbox Video</li>
  <li data-time="11:29">Flexbox Video</li>
  <li data-time="3:07">Flexbox Video</li>
  <li data-time="5:59">Redux Video</li>
  <li data-time="3:31">Flexbox Video</li>
</ul>

JavaScript

// Select all the list items on the page and convert to array
let items = [].slice.call(document.querySelectorAll('[data-time]'));
// Filter for only the elements that contain the word 'flexbox'
items = items.filter(item => item.innerText.toLowerCase().indexOf('flexbox') === 0)
  // map down to a list of time strings
  .map(item => item.getAttribute('data-time'))
  // map to an array of seconds
  .map(item => {
  	let timeParts = item.split(':');
    return (parseInt(timeParts[0] || 0), 10) * 60 + parseInt(timeParts[1], 10);
  })
  // reduce to get total
  .reduce((a,b) => a+b)

console.info(items);