JavaScript Patterns - Revealing Module Pattern - Timer

Sample Timer app showing how to use the Revealing Module pattern.

by Roman Joseph Rimorin

HTML

<div id="timerContainer">
        <div id="timerSurface" >
            <div id="timerHeaders" >
                <div class="HeaderText NormalWidth">MIN</div>
                <div class="HeaderText NormalWidth">SEC</div>
                <div class="HeaderText WideWidth">MS</div>
            </div>
            <div id="timerNumbers">
                <div id="minutes" class="bg TimerText NormalWidth"></div>
                <div id="seconds" class="bg TimerText NormalWidth"></div>
                <div id="milliseconds" class="bg TimerText WideWidth"></div>
            </div>
        </div>
        <div id="buttonSurface">
            <div id="startButton" class="Button ButtonStart"></div>
            <div id="pauseButton" class="Button ButtonPause"></div>
            <div id="clearButton" class="Button ButtonClear"></div>
        </div>
    </div>

CSS

#timerContainer
{
    width: 290px;
    height:156px;
}

#timerSurface
{
    width: 290px;
    height:108px;
    background-color: #383431;
}
#timerHeaders 
{
    height:20px;
}
#timerNumbers 
{
    text-align: center;
    font-family:  Impact, sans-serif;
    font-size: 54px;
    color: #D0D0D0;
}

.HeaderText 
{
    float:left;
    height: 20px;
    padding: 5px 6px 5px 6px;
    text-align: center;
    font-family:  sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #D0D0D0;
    margin-left: 5px;
}
.TimerText
{
    float:left;
    height: 60px;
    padding: 5px 5px 5px 5px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #242323;
    margin-left: 5px;
    vertical-align: middle;
/*    background-image: url(http://johnpapa.net/files/downloads/images/bg.png); */
}

.NormalWidth
{
    width:68px;
}
    
.WideWidth
{
    width:100px;
}

#buttonSurface 
{
    width:236px;
    margin: auto;
}
.ButtonStart
{
    background-image: url(http://johnpapa.net/files/downloads/images/start.png); 
}
.ButtonPause
{
    background-image: url(http://johnpapa.net/files/downloads/images/pause.png); 
}
.ButtonClear
{
    background-image: url(http://johnpapa.net/files/downloads/images/clear.png); 
}
.Button
{
    float:left;
    width:68px;
    height: 68px;
    padding: 5px 5px 5px 5px;
    text-align: center;
    vertical-align:middle;
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: center;
}
.Button:hover  
{
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -webkit-transition: -webkit-transform 0.3s ease-in;
    -moz-transform: scale(1.05);
    -moz-transition: -moz-transform 0.3s ease-in;
    transform: scale(1.05);
    transition: transform 0.3s ease-in;
}

.bg
{
    background-image: url(http://johnpapa.net/files/downloads/images/bg.png); 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0,...

JavaScript

$(document).ready(function() {
    TimerRMP.init('startButton', 'pauseButton', 'clearButton');
});


var TimerRMP = (function(window) {
    "use strict";
    var
    document = window.document,
        timerId = -1,
        interval = 25,
        ms = 0,
        seconds = 0,
        minutes = 0,
        startTimer = function() {
            if (timerId === -1) {
                timerId = window.setInterval("TimerRMP.turnTimerOn()", interval);
            }
        },
        displayTimer = function() {
            document.getElementById('milliseconds').innerHTML = ms;
            document.getElementById('seconds').innerHTML = seconds;
            document.getElementById('minutes').innerHTML = minutes;
        },
        turnTimerOn = function() {
            ms += interval;
            if (ms >= 1000) {
                ms = 0;
                seconds += 1;
            }
            if (seconds >= 60) {
                ms = 0;
                seconds = 0;
                minutes += 1;
            }
            displayTimer();
        },
        pauseTimer = function() {
            window.clearInterval(timerId);
            timerId = -1;
        },
        clearTimer = function() {
            pauseTimer();
            ms = 0;
            seconds = 0;
            minutes = 0;
            displayTimer();
        },
        init = function(startButton, pauseButton, clearButton) {
            document.getElementById(startButton).addEventListener("click", startTimer, false);
            document.getElementById(pauseButton).addEventListener("click", pauseTimer, false);
            document.getElementById(clearButton).addEventListener("click", clearTimer, false);
            displayTimer();
        };
    return {
        init: init,
        turnTimerOn: turnTimerOn
    };
}(window));