Count.ly

In this example below you will see how to do a Count.ly with some HTML / CSS and Javascript

Simple counter using JQuery & Handlebars.js - happy counting!

Thumbnail
This awesome code was written by AlisonBuki, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AlisonBuki ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Count.ly</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
	<title>Count.ly</title>
	<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,900" rel="stylesheet"/>
	<link type='text/css' href="css/style.css" rel="stylesheet"/>
	
</head>

<body>
<h1><a href="#" data-src="https://66.media.tumblr.com/d7319a0b492cc8ac2d49b7e0c9e6e4cf/tumblr_inline_nzw9kx9vDs1qc0sxf_500.gif">COUNT</a>.LY</h1>

<div id="counter">
<button id="minus">&nbsp;&nbsp;&ndash;&nbsp;&nbsp;</button>
<span id="count"></span>
<button id="plus">&nbsp;&nbsp;+&nbsp;&nbsp;</button>
<br/>
<button id="clear">&nbsp;&nbsp;CLEAR&nbsp;&nbsp;</button>
</div>

<script type='text/x-handlebars-template' id='count-template'>
	<span class = "count">{{n}}</span>
</script>

</body>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js'></script>
<script src='https://cdn.rawgit.com/tholman/giflinks/master/GifLinks.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/AlisonBuki/countly-ZOAKER */
body {
	font-family: 'Work Sans', Helvetica, sans-serif;
	color: #333;
	text-align: center;
	background-color: #f9f9f9;
}

h1 {
 	font-weight: 900;
 	font-size: 4.5em;
 	letter-spacing: .12em
}


button {
	font-size: 2em;
	padding: 15px;
	font-weight: 900;
	background-color: #333;
	border: 2px solid;
	border-color: #333;
	color: white;
	text-transform: uppercase;
	margin: 30px 0px 70px 0px;

}

#count, .count {
	font-weight: 300;
	font-size: 9em;
	padding: 0px 50px 0px 50px;
	}

#plus:hover {
	background-color: #47b8b2;
	border-color: #47b8b2;
}

#minus:hover {
	background-color: #f42727;
	border-color: #f42727;
}

#clear {
	font-weight: 300;
	margin-top: 20px;
}

#clear:hover {
	background-color: #bb8899;
	border-color: #bb8899;
}

a {
	text-decoration: none;
	color: #BB8899;
}

.red {
	color: #f42727;
}

.purple {
	color: #bb8899;
}

/*Downloaded from https://www.codeseek.co/AlisonBuki/countly-ZOAKER */
//Model

var n = 0;

//View

window.onload = function() {
	// Add GifLinks to all anchor tags on the page!
    var element = document.querySelector( 'a' );
    GifLinks( element );
}

function render() {

$('#count').toggleClass('red', n > 100);
$('#count').toggleClass('purple', n < 0);

$('#count').html(n.toString());

var source = $('#count-template').html();
var template = Handlebars.compile(source);
}

//Controller

function setup() {
	//setup view
	render();

	//setup event listeners
	$('#counter').on('click', '#plus', increment);
	$('#counter').on('click', '#minus', decrement);
	$('#counter').on('click', '#clear', clear);
}

function increment() {
	n++;
	render();
}

function decrement() {
	n--;
	render();
}

function clear() {
	n = 0;
	render();
}


$(document).ready(setup);

Comments