Fauntleroy/constructing.js

## constructing.js
var PlaylistItem = function( params ){

	// ensure params exists
	params = params || {};

	// cache a reference to this
	var playlist_item = this;

	// attach arguments to new PlaylistItem instance
	this.title = params.title;
	this.artist = params.artist;
	this.thumbnail = params.thumbnail;
	this.duration = params.duration;

	// return a human readable version of the duration
	this.getPrettyDuration = function(){
		var seconds = playlist_item.duration % 60;
		var minutes = parseInt( playlist_item.duration / 60 );
		return minutes +':'+ seconds;
	};

	// create playlist item DOM element
	var $playlist_item = $('<li><img src="'+ this.thumbnail +'" /><h6>'+ this.title +'</h6><em>'+ this.artist +'</em><var>'+ this.getPrettyDuration() +'</var><a href="#remove">x</a></li>');

	// bind playlist item removal
	$playlist_item.on( 'click', 'a[href="#remove"]', function( e ){
		e.preventDefault();
		$playlist_item.remove();
	});

	// add DOM element to DOM
	$('#playlist').append( $playlist_item );

};

$(function(){

	// data
	var artist = 'Konami';
	var thumbnail = 'http://3.bp.blogspot.com/-4HnRUKAE1g0/ToSm3AdqWiI/AAAAAAAAAjg/cAi4tnRL0go/s1600/mgs1.jpg';
	var tracks = [{
		title: 'Metal Gear Solid Main Theme',
		duration: 2 * 60 + 44
	}, {
		title: 'Introduction',
		duration: 57
	}, {
		title: 'Discovery',
		duration: 5 * 60 + 5
	}, {
		title: 'Cavern',
		duration: 3 * 60 + 12
	}, {
		title: 'Intruder 1',
		duration: 2 * 60 + 5
	}, {
		title: 'Encounter',
		duration: 2 * 60 + 21
	}];

	// loop through each item in tracks
	for( var i in tracks ){
		var track = tracks[i];
		new PlaylistItem({
			title: track.title,
			artist: artist,
			thumbnail: thumbnail,
			duration: track.duration
		});
	}

});

## index.htm
<!DOCTYPE html>
<html>
<head>

	<style>
		#playlist li img {
			width: 100px;
		}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="./constructing.js"></script>

</head>
<body>

	<ul id="playlist"></ul>

</body>
</html>
	var PlaylistItem = function( params ){

	// ensure params exists
	params = params \|\| {};

	// cache a reference to this
	var playlist_item = this;

	// attach arguments to new PlaylistItem instance
	this.title = params.title;
	this.artist = params.artist;
	this.thumbnail = params.thumbnail;
	this.duration = params.duration;

	// return a human readable version of the duration
	this.getPrettyDuration = function(){
	var seconds = playlist_item.duration % 60;
	var minutes = parseInt( playlist_item.duration / 60 );
	return minutes +':'+ seconds;
	};

	// create playlist item DOM element
	var $playlist_item = $('<li><img src="'+ this.thumbnail +'" /><h6>'+ this.title +'</h6><em>'+ this.artist +'</em><var>'+ this.getPrettyDuration() +'</var><a href="#remove">x</a></li>');

	// bind playlist item removal
	$playlist_item.on( 'click', 'a[href="#remove"]', function( e ){
	e.preventDefault();
	$playlist_item.remove();
	});

	// add DOM element to DOM
	$('#playlist').append( $playlist_item );

	};

	$(function(){

	// data
	var artist = 'Konami';
	var thumbnail = 'http://3.bp.blogspot.com/-4HnRUKAE1g0/ToSm3AdqWiI/AAAAAAAAAjg/cAi4tnRL0go/s1600/mgs1.jpg';
	var tracks = [{
	title: 'Metal Gear Solid Main Theme',
	duration: 2 * 60 + 44
	}, {
	title: 'Introduction',
	duration: 57
	}, {
	title: 'Discovery',
	duration: 5 * 60 + 5
	}, {
	title: 'Cavern',
	duration: 3 * 60 + 12
	}, {
	title: 'Intruder 1',
	duration: 2 * 60 + 5
	}, {
	title: 'Encounter',
	duration: 2 * 60 + 21
	}];

	// loop through each item in tracks
	for( var i in tracks ){
	var track = tracks[i];
	new PlaylistItem({
	title: track.title,
	artist: artist,
	thumbnail: thumbnail,
	duration: track.duration
	});
	}

	});
	<!DOCTYPE html>
	<html>
	<head>

	<style>
	#playlist li img {
	width: 100px;
	}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="./constructing.js"></script>

	</head>
	<body>

	<ul id="playlist"></ul>

	</body>
	</html>