JSFiddle - React, Tailwind, and code Playground

by brianeoneill

HTML

<form>
  <ul>
    <li>
      <input type="checkbox" id="s-fry" data="stephenfry" />
      <label for="s-fry">Stephen Fry</label>
    </li>
    <li>
      <input type="checkbox" id="r-dawkins" data="richarddawkins" />
      <label for="r-dawkins">Richard Dawkins</label>
    </li>
    <li>
      <input type="checkbox" id="s-macfarlane" data="sethmacfarlane" />
      <label for="s-macfarlane">Seth MacFarlane</label>
    </li>
    <li>
      <input type="checkbox" id="r-gervais" data="rickygervais" />
      <label for="r-gervais">Ricky Gervais</label>
    </li>
  </ul>
  <input type="submit" value="Go" />
</form>
<div id="tweets"></div>

CSS

form li { 
  overflow: hidden;
  padding-bottom: 10px;
}
form label {
  float: left;
}
form input {
  float: left;
  margin-right: 8px;
}
#tweets {
  clear: both;
  width: 500px;
  margin-top: 30px;
}
#tweets li {
  overflow: hidden;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
}
#tweets h2 {
  float: left;
  padding-left: 5px;
}
#tweets img {
  float: left;
  margin-right: 12px;
}
#tweets p {
  padding-left: 65px;
  float: left;
}
#tweets small {
  float: right;
}

JavaScript

$('input[type=submit]').on('click', function(e){

  // prevent default behavior of the submit button
  e.preventDefault();
  
  // empty the div with ID of tweets
  $('#tweets').empty();

  // create an empty array for the tweets
  var returnedTweets = [];

  // perform a function on all of the checked boxes
  $(':checkbox:checked').each( function(){
    
    var twitterID = $(this).attr('data');

    // use the "data" attribute to build the query string for getJSON
    $.getJSON( 'http://api.twitter.com/1/statuses/user_timeline/'+twitterID+'.json?callback=?', null, function(data){

        $.each(data, function(i, tweet){ 
          returnedTweets.push(tweet); 
        });
        

      returnedTweets.sort(function(a,b){
        var a = parseInt(this.id);
        var b = parseInt(this.id);
        return b-a;
      });

      $.each(returnedTweets, function(){
        console.log(this.id);
      });

        // create an empty ul
      var tweetList = $('<ul id="tweets-list">');

      // for each JSON object returned, parse it into an li
      $.each(returnedTweets, function(i, tweet){
        var item  = $('<li class="'+this.id+'">');
        var name  = $('<h2>').text(tweet.user.name);
        var date  = $('<small>').text(prettyDate(tweet.created_at));
        var img   = $('<img>').attr('src', tweet.user.profile_image_url);
        var msg   = $('<p>').text(tweet.text);
        item.append(img,name,date,msg);

      // this function prettifies the date displayed in the tweet
      function prettyDate(time){
        var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);
              
        if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
        return;
              
        return day_diff == 0 && (
              diff < 60 && "just now" ||
              diff < 120 && "1 minute ago" ||
              diff < 3600 &&...