es6.io - 1 - Arrays - Exercise 1

by matox

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>

<p class="result"></p>

JavaScript

const result = document.querySelector('.result');

  // Select all the list items on the page and convert to array
	const flexboxes = Array.from(document.querySelectorAll('[data-time]'));
  
  // Filter for only the elements that contain the word 'flexbox'
	const filter = flexboxes
  	.filter(f => f.textContent.includes('Flexbox'))
  
  // map down to a list of time strings
  	.map(f => f.dataset.time)

  // map to an array of seconds
  	.map(f => {
    	const time = f.split(':').map(part => parseFloat(part));
      return (time[0] * 60) + time[1];
    })
  
  // reduce to get total
  	.reduce((runningTotal, seconds) => runningTotal+seconds, 0);
  
result.innerHTML = filter;