Task

Twitter message time mimic.

by Ben Clayton

HTML

Messages (x):<br>
<div class="messages"></div>
<button id="add">Add</button>
<div id="notes">
When you add a message the time of message will display 'now' but if you leave the message up on screen it updates automatically to display time like twitter etc.  'now', '10 secs ago', "1 day ago". Each message has it's own time which displays time relative to when it was added. Also the Messages count at the top should display count of how many messages.
</div>

CSS

.messages {
	
	
	min-height:200px;
	
}
.message {
	border:1px solid gray;
	padding:3px;
	margin-bottom:1px;
}

.messages .time {
	float:right;
	clear:both;
}
#notes {
	margin-top:30px;
}

JavaScript

$("#add").on( 'click' , function(){
	$(".messages").append("<div class='message'><div class='time'>now</div>A message ...</div>");

} );