COUNTER module demo

Demo for my Javascript for PHP Developers talk at PHPBenelux meeting in Antwerp on 27th of November 2013

HTML

<div id="container"></div>

<button id="trigger">Add 1</button>

CSS

body {
    padding: 1em;
    font-size: 2em;
}
#container {
    background-color: #cfcfcf;
    border-radius: 5px;
    padding: 1em;
    margin: 1em 0;
}

JavaScript

var COUNTER = (function(){
    var _counter = 0;
    var _format = 'Counter value is ';
    var _container;
    var format = function(value){
        return _format + value;
    }
    var init = function(container){
        _container = container;
        _container.innerHTML = 'Counter ready ...';
        return public;
    }
    var public = {
        increment : function(){ 
            _counter++;
            _container.innerHTML = this.getValue();
        },
        getValue : function(){
            return format(_counter);
        }, 
        setFormat: function(str){
            _format = str;
        }
    };
    return init;
}());

var myCounter = COUNTER(document.getElementById('container'));
document.getElementById('trigger').onclick = function(){
    myCounter.increment();
};