JSFiddle - React, Tailwind, and code Playground
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();
// 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
var deferred = $.getJSON( 'http://api.twitter.com/1/statuses/user_timeline/'+twitterID+'.json?callback=?', null, function(data){
// create an empty ul
var tweetList = $('<ul id="tweets-list">');
// for each JSON object returned, parse it into an li
$.each(data, function(i, tweet){
var item = $('<li>');
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 && Math.floor( diff / 60 ) + " minutes ago" ||
diff < 7200 && "1 hour ago" ||
diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
day_diff == 1 && "Yesterday" ||
day_diff < 7 && day_diff + " days ago" ||
day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
} // end of prettyDate
// add the li to the empty tweetList...