fabwu/event.js

## event.js
var timer;

window.addEventListener('load', function () {
    timer = new Timer();
    update();
});

document.getElementById('inc-min').addEventListener('click', function () {
    timer.incrementMinutes();
    updateMinutes();
});

document.getElementById('dec-min').addEventListener('click', function () {
    timer.decrementMinutes();
    updateMinutes();
});

document.getElementById('inc-sec').addEventListener('click', function () {
    timer.incrementSeconds();
    updateSeconds();
});

document.getElementById('dec-sec').addEventListener('click', function () {
    timer.decrementSeconds();
    updateSeconds();
});

document.getElementById('start').addEventListener('click', function () {
    timer.start(update, finish);
});

document.getElementById('stop').addEventListener('click', function () {
    timer.stop();
});

document.getElementById('reset').addEventListener('click', function () {
    timer.reset();
    update();
});

function update() {
    updateMinutes();
    updateSeconds();
}

function finish() {
    alert('Alert!!!');
}

function updateMinutes() {
    document.getElementById('minutes').textContent = timer.minutes;
}

function updateSeconds() {
    var seconds = timer.seconds;
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    document.getElementById('seconds').textContent = seconds;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Timer</title>
    <style>
        body {
            width: 30%;
        }

        .timer-container {
            text-align: center;
        }

        .minutes-container {
            float: left;
        }

        .seconds-container {
            float: right;
        }

        .button-block {
            display: block;
        }

        .controll-container {
            clear: both;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="timer-container">
    <div class="minutes-container">
        <button id="inc-min" class="button-block">Up</button>
        <button id="dec-min">Down</button>
    </div>

    <span id="minutes">0</span>:<span id="seconds">00</span>

    <div class="seconds-container">
        <button id="inc-sec" class="button-block">Up</button>
        <button id="dec-sec" class="button-block">Down</button>
    </div>
</div>
<div class="controll-container">
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
</div>
<script src="timer.js"></script>
<script src="events.js"></script>
</body>
</html>

## timer.js
function Timer() {
    var minutes = 0;
    var seconds = 0;
    var timer;

    return {
        get minutes() {
            return minutes;
        },
        get seconds() {
            return seconds;
        },
        incrementMinutes: incrementMinutes,
        decrementMinutes: decrementMinutes,
        incrementSeconds: incrementSeconds,
        decrementSeconds: decrementSeconds,
        start: start,
        stop: stop,
        reset: reset
    };

    function incrementMinutes() {
        if (minutes < 9) {
            minutes++;
        } else {
            minutes = 0;
        }
    }

    function decrementMinutes() {
        if (minutes > 0) {
            minutes--;
        } else {
            minutes = 9;
        }
    }

    function incrementSeconds() {
        if (seconds < 59) {
            seconds++;
        } else {
            seconds = 0;
        }
    }

    function decrementSeconds() {
        if (seconds > 0) {
            seconds--;
        } else {
            seconds = 59;
        }
    }

    function start(tick, finish) {
        if (!(seconds > 0 || minutes > 0) || timer) {
            return;
        }
        timer = setInterval(function () {
            if (seconds === 0) {
                decrementMinutes();
            }
            decrementSeconds();
            tick();
            if (seconds === 0 && minutes === 0) {
                stop();
                finish();
            }
        }, 1000);
    }

    function stop() {
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
    }

    function reset() {
        stop();
        minutes = 0;
        seconds = 0;
    }

}
	var timer;

	window.addEventListener('load', function () {
	timer = new Timer();
	update();
	});

	document.getElementById('inc-min').addEventListener('click', function () {
	timer.incrementMinutes();
	updateMinutes();
	});

	document.getElementById('dec-min').addEventListener('click', function () {
	timer.decrementMinutes();
	updateMinutes();
	});

	document.getElementById('inc-sec').addEventListener('click', function () {
	timer.incrementSeconds();
	updateSeconds();
	});

	document.getElementById('dec-sec').addEventListener('click', function () {
	timer.decrementSeconds();
	updateSeconds();
	});

	document.getElementById('start').addEventListener('click', function () {
	timer.start(update, finish);
	});

	document.getElementById('stop').addEventListener('click', function () {
	timer.stop();
	});

	document.getElementById('reset').addEventListener('click', function () {
	timer.reset();
	update();
	});

	function update() {
	updateMinutes();
	updateSeconds();
	}

	function finish() {
	alert('Alert!!!');
	}

	function updateMinutes() {
	document.getElementById('minutes').textContent = timer.minutes;
	}

	function updateSeconds() {
	var seconds = timer.seconds;
	if (seconds < 10) {
	seconds = '0' + seconds;
	}
	document.getElementById('seconds').textContent = seconds;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Timer</title>
	<style>
	body {
	width: 30%;
	}

	.timer-container {
	text-align: center;
	}

	.minutes-container {
	float: left;
	}

	.seconds-container {
	float: right;
	}

	.button-block {
	display: block;
	}

	.controll-container {
	clear: both;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div class="timer-container">
	<div class="minutes-container">
	<button id="inc-min" class="button-block">Up</button>
	<button id="dec-min">Down</button>
	</div>

	<span id="minutes">0</span>:<span id="seconds">00</span>

	<div class="seconds-container">
	<button id="inc-sec" class="button-block">Up</button>
	<button id="dec-sec" class="button-block">Down</button>
	</div>
	</div>
	<div class="controll-container">
	<button id="start">Start</button>
	<button id="stop">Stop</button>
	<button id="reset">Reset</button>
	</div>
	<script src="timer.js"></script>
	<script src="events.js"></script>
	</body>
	</html>
	function Timer() {
	var minutes = 0;
	var seconds = 0;
	var timer;

	return {
	get minutes() {
	return minutes;
	},
	get seconds() {
	return seconds;
	},
	incrementMinutes: incrementMinutes,
	decrementMinutes: decrementMinutes,
	incrementSeconds: incrementSeconds,
	decrementSeconds: decrementSeconds,
	start: start,
	stop: stop,
	reset: reset
	};

	function incrementMinutes() {
	if (minutes < 9) {
	minutes++;
	} else {
	minutes = 0;
	}
	}

	function decrementMinutes() {
	if (minutes > 0) {
	minutes--;
	} else {
	minutes = 9;
	}
	}

	function incrementSeconds() {
	if (seconds < 59) {
	seconds++;
	} else {
	seconds = 0;
	}
	}

	function decrementSeconds() {
	if (seconds > 0) {
	seconds--;
	} else {
	seconds = 59;
	}
	}

	function start(tick, finish) {
	if (!(seconds > 0 \|\| minutes > 0) \|\| timer) {
	return;
	}
	timer = setInterval(function () {
	if (seconds === 0) {
	decrementMinutes();
	}
	decrementSeconds();
	tick();
	if (seconds === 0 && minutes === 0) {
	stop();
	finish();
	}
	}, 1000);
	}

	function stop() {
	if (timer) {
	clearInterval(timer);
	timer = null;
	}
	}

	function reset() {
	stop();
	minutes = 0;
	seconds = 0;
	}

	}