JSFiddle - React, Tailwind, and code Playground

by dbugger

HTML

<div class="track-history">
	<h1>Recently Played</h1>
	<ul></ul>
</div>

CSS

/*
 * Took the real resources from www.di.fm
 * I hope you dont mind the hot-linking!
 */
@import url(http://fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic);
@font-face{
	font-family: 'sansation';
	src: url(http://www.di.fm/assets/sansation_regular-webfont-717f8107474a3ae166b47a83fa702521.eot);
	src: url(http://www.di.fm/assets/sansation_regular-webfont.eot?#iefix) format("embedded-opentype"),
		url(http://www.di.fm/assets/sansation_regular-webfont-e369946b5876d072e1aed2b9c79d1968.woff) format("woff"),
		url(http://www.di.fm/assets/sansation_regular-webfont-ebaee3e279e4b89939c8642b1d44e68b.ttf) format("truetype"),
		url(http://www.di.fm/assets/sansation_regular-webfont.svg#sansation) format("svg");
	font-weight:normal;
	font-style:normal
}

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}
.track-history{
	background : #272727;
	font-family: "Muli", Arial, sans-serif;
}
h1{
	margin : 0;
	padding: 12px 20px;
	
	background-color: #2f2f2f;
	color           : #b7b7b7;
	
	font-size     : 16px;
	font-weight   : normal;
	font-family   : "sansation", sans-serif;
	text-transform: uppercase;
}
.track-history ul{
	margin    : 0;
	padding   : 0;
	list-style: none;
}

.track-history li{
	border-top   : 1px solid #333333;
	border-bottom: 1px solid #111111;
	padding      : 10px 20px;
	transition: background-color .15s linear;
}
.track-history li:hover{
	background : #404040;
}
.track-history img{
	float       : left;
	margin-right: 10px;
}
.name{
	margin-top: 4px;
	color     : #eeeeee;
	font-size : 14px;
}
.started{
	color    : #888888;
	font-size: 13px;
}

JavaScript

/*
 * I didnt account for document.ready because I usually place my scripts at the end of
 * the DOM, but Im not sure what jsfiddle does, so I will add it
 */

$(document).ready(function() {

	$.ajax({
		url: "http://api.audioaddict.com/v1/ping.jsonp",
		dataType: "jsonp",
		error: function() {
			addTracksToHistory(0); // Assume clock drift is 0
		},
		success: function(data){
			var servertime   = new Date(data.time).getTime(),
			    clienttime   = new Date().getTime(),
			    serveroffset = Math.round((clienttime - servertime)/1000);	// Server time difference (in seconds)

			addTracksToHistory(serveroffset);
		}
	});

	/*
	 * It will be called in the callback when trying to get the server time, to ensure the
	 * order of execution is proper: first getting server time, second render the history
	 */
	var addTracksToHistory = function(serveroffset) {
		$.ajax({
			url: "http://api.audioaddict.com/v1/di/track_history/channel/2.jsonp",
			dataType: "jsonp",
			error: function() {
				/* not considered */ 
			},
			success: function(data){

				var now  = Math.round(new Date().getTime() / 1000);	// Current timestamp (in seconds)
				var html = "";

				$(data).each(function(index, data){

					var album, elapsed;

					// Filter out ads
					if (data.type == "advertisement")
						return;

					// Prepare album cover
					// Easier to read
					album = data.art_url || "http://placehold.it/50x50";

					// Time elapsed
					elapsed = timePassed(now - data.started - serveroffset); //Formula corrected. The "server offset" has to be substracted.
					
					// I didn't realize I had hardcoded the placeholder =P Now it is corrected
					html += '<li class="clearfix"><img src="'+album+'" alt="some album cover" /><div class="name">'+data.track+'</div><div class="started">'+elapsed+'</div></li>';
				
				});

				// Add all the tracks in one go. Less DOM manipulation = better performance
				$("ul").append(html);
			}
		});
	};

	var timePassed =...