JSFiddle - React, Tailwind, and code Playground

by Alex Fogarty

HTML

<body>
     <div id="jstwitter">
		<h1>Twitter Feed</h1>	
	</div>
</body>

CSS

#jstwitter {
    width: 300px;
    font-family: georgia;
    font-size: 15px;
    color: #333333;
    padding: 10px;
}
 
#jstwitter .tweet {
    margin: 0 auto 15px auto;
    padding: 0 0 15px 0;
    border-bottom: 1px dotted #ccc;
}
 
#jstwitter .tweet a {
    text-decoration: none;
    color: #13c9d0;
}
 
#jstwitter .tweet a:hover {
    text-decoration: underline;
}
 
#jstwitter .tweet .time {
    font-size: 10px;
    font-style: italic;
    color: #666666;
}

JavaScript

JQTWEET = {
	
	// Set twitter username, number of tweets & id/class to append tweets
	user: 'alex_fogarty',
	numTweets: 5,
	appendTo: '#jstwitter',

	// core function of jqtweet
	loadTweets: function() {
		$.ajax({
			url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
			type: 'GET',
			dataType: 'jsonp',
			data: {
				screen_name: JQTWEET.user,
				include_rts: true,
				count: JQTWEET.numTweets,
				include_entities: true
			},
			success: function(data, textStatus, xhr) {

			 var html = '<div class="tweet">TWEET_TEXT<div class="time">AGO</div>';

				 // append tweets into page
				 for (var i = 0; i < data.length; i++) {
					$(JQTWEET.appendTo).append(
						html.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text))
							.replace(/USER/g, data[i].user.screen_name)
							.replace('AGO', JQTWEET.timeAgo(data[i].created_at))
							.replace(/ID/g, data[i].id_str)
					);

				 }					
			}	

		});
		
	}, 
	
		
	/**
      * relative time calculator FROM TWITTER
      * @param {string} twitter date string returned from Twitter API
      * @return {string} relative time like "2 minutes ago"
      */
    timeAgo: function(dateString) {
		var rightNow = new Date();
		var then = new Date(dateString);
		
		if ($.browser.msie) {
			// IE can't parse these crazy Ruby dates
			then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));
		}

		var diff = rightNow - then;

		var second = 1000,
		minute = second * 60,
		hour = minute * 60,
		day = hour * 24,
		week = day * 7;

		if (isNaN(diff) || diff < 0) {
			return ""; // return blank string if unknown
		}

		if (diff < second * 2) {
			// within 2 seconds
			return "right now";
		}

		if (diff < minute) {
			return Math.floor(diff / second) + " seconds ago";
		}

		if (diff < minute * 2) {
			return "about 1 minute ago";
		}

		if (diff < hour) {
			return Math.floor(diff / minute) + " minutes ago";
		}

		if (diff < hour * 2) {
			return "about 1 hour ago";
		}

		if (diff < day) {
			return ...