<div class="counter-wrapper"></div>

	<input class="counter-input" value="1234" type="text"></input>
	<a href="#" class="create-counter">Countify!</a>
	<p class="error">Please enter only numbers.<p>

body{
	font-family:sans-serif;
	font-size:1em;
}

.digit-con{
	height:5.75em;
	overflow:hidden;
	display:inline-block;
	margin-left:.5em;
}
.digit-con span{
	background-color:#0CA67F;
	width:.75em;
	display:block;
	text-align:center;
	font-size:5em;
	color:#fff;
	position:relative;
	top:0;
}
.comma{
	color:#0CA67F;
	font-size:4.2em;
}

.error{
	color:red;
	display:none;
}

$(document).ready(function(){
	counter();

	$('.counter-input').focus(function() {
		$(".error").fadeOut();
	});

	$(".create-counter").click(function(){

		var intRegex = /^\d+$/;
		var floatRegex = /^((\d+(\.\d *)?)|((\d*\.)?\d+))$/;
		var str = $('.counter-input').val();

		if(intRegex.test(str) || floatRegex.test(str)){
			counter();
		}
		else{
			$(".error").fadeIn();
		}
	});
});

function counter(){

	$('.counter-wrapper').empty();

	var number = $(".counter-input").val();
	var numArray = number.split("");

	for(var i=0; i<numArray.length; i++) { 
		numArray[i] = parseInt(numArray[i], 10);
		$(".counter-wrapper").append('<span class="digit-con"><span class="digit'+i+'">0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br></span></span>');	
	}

	var increment = $('.digit-con').outerHeight();
	var speed = 1000;

	for(var i=0; i<numArray.length; i++) {
		$('.digit'+i).animate({top: -(increment * numArray[i])}, speed);
	}

	$(".digit-con:nth-last-child(3n+4)").after("<span class='comma'>,</a>");
}