<h1>The List of Blogs for Front-End Devs</h1>
<p>This list is sorted in alphabetic order.
  <button>sort by clicks</button></p>
<ul>
  <li><a href="https://alistapart.com/" target="_blank">A List Apart</a></li>
  <li><a href="https://medium.com/dailyjs" target="_blank">dailyJS</a></li>
  <li><a href="https://dev.to" target="_blank">dev.to</a></li>
  <li><a href="https://medium.freecodecamp.org" target="_blank">freeCodeCamp</a></li>
</ul>

li {
  line-height:30px
}
button {
  margin-left:5px;
}

// configure DataDrivenJS to use my project

var ul = document.querySelector('ul');
var button = document.querySelector('button');
// track clicks

ul.addEventListener('click',function(e){
  if (e.target.tagName==='A') { // it's a link
    DD.tracker.trackMetaEvent('clicked',e.target.innerText); 
  }
});

// load data required to sort by clicks

button.addEventListener('click',function(e){
  // prepare public data feed

  var feed = DD.data.feed('My Blog Posts');
  feed.select(
    DD.data.datapoints.metaevent('clicked'),
    DD.data.datapoints.metaevent('clicked').count().as('clicks')
  ).orderBy(
    DD.data.feedColumn('clicks').desc()
  );

  // read the entire data feed

  DD.reader.read(feed, {}, function(response){
    sortList(response.results);
  });
});

var sortList = function(stats){
    var newUl = ul.cloneNode(false);
    // Add clicks as data attribute and convert nodelist to array
    var lis = [];
    for (var i = 0; i<ul.childNodes.length; i++){
      if(ul.childNodes[i].nodeName === 'LI'){
        for (var j=0; j<stats.length; j++){
          if (stats[j].clicked===ul.childNodes[i].innerText){
            ul.childNodes[i].dataset.clicks = stats[j].clicks;            
            break;
          }
        }
        lis.push(ul.childNodes[i]);
      }
    }

    // Sort the lis in descending order
    lis.sort(function(a, b){
       return parseInt(b.dataset.clicks , 10) - 
              parseInt(a.dataset.clicks , 10);
    });

    // Add them into the ul in the right order
    for(var i = 0; i < lis.length; i++){
        newUl.appendChild(lis[i]);
    }
    ul.parentNode.replaceChild(newUl, ul);
}