balinterdi · November 3, 2010 10:42
diff --git a/timer.html b/timer.html
 <!DOCTYPE HTML>
 <html>
  <head>
    <title>Tea timer</title>
    <style type="text/css">
      #timer {
        margin: 50px auto;
        text-align: center;
        font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
      }

      #display {
        font-size: 90px;
      }

      #controls {
        margin-top: 20px;
      }
    </style>
    <script type="text/javascript">
      // google analytics
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-19481643-1']);
      _gaq.push(['_setDomainName', '.balinterdi.com']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

      var t = null;
      function countDown(){
        if ( decTimer() > 0 ) {
          t = setTimeout(countDown, 1000);
        }
      }

      function decTimer() {
        var newSeconds = secondsLeft() - 1;
        if ( newSeconds >= 0 ) {
          updateTimer(newSeconds);
        }
        return newSeconds;
      }

      function secondsLeft(){
        var timeParts = timer().innerText.split(':');
        var mins = timeParts[0].replace(/^0*/,'');
        mins = mins.length == 0 ? 0 : parseInt(mins);
        var seconds = timeParts[1].replace(/^0*/,'');
        seconds = seconds.length == 0 ? 0 : parseInt(seconds);
        return 60*mins + seconds;
      }

      function updateTimer(seconds){
        var mins = Math.floor(seconds / 60);
        var seconds = seconds % 60;
        var minsString = mins < 10 ? '0' + mins : mins;
        var secsString = seconds < 10 ? '0' + seconds : seconds;
        timer().innerHTML = minsString + ':' + secsString;
      }

      function timer() {
        return document.getElementById('display');
      }
      // END: time handling

      var setTime = [];
      function initializeTimer() {
        var newTimeParts = [];
        for (var i=0; i < 4; i++) {
          var elt = setTime[i] ? setTime[i] : '0'
          newTimeParts[i] = elt;
        }
        // while (timeParts.length < 4) timeParts.push('0');
        newTimeParts.splice(2, 0, ':');
        timer().innerHTML = newTimeParts.join('');
      }

      document.onkeyup = function(e) {
       var e = window.event || e
       var keyPressed = String.fromCharCode(e.keyCode);
       if ( !isNaN(parseInt(keyPressed)) ) {
         setTime.push(keyPressed);
         initializeTimer();
       } else if (e.keyCode == 13) {
         startTimer();
       } else if (e.keyCode == 32) {
         clearTimer();
       } else {
         console.log(e.keyCode);
       }
      }

      function startTimer() {
        _gaq.push(['_trackEvent', 'Timer', 'Start']);
        countDown();
      }

      function stopTimer() {
        _gaq.push(['_trackEvent', 'Timer', 'Stop']);
        clearTimeout(t);
        document.getElementById('start').innerHTML = 'Resume'
      }

      function clearTimer() {
        _gaq.push(['_trackEvent', 'Timer', 'Clear']);
        setTime = [];
        initializeTimer();
        document.getElementById('start').innerHTML = 'Start'
      }

    </script>
  </head>
  <body>
    <div id="timer">
      <div id="display">10:00</div>
      <div id="controls">
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="clear">Clear</button>
      </div>
    </div>
    <script type='text/javascript'>
      document.getElementById('start').onclick = startTimer;
      document.getElementById('stop').onclick = stopTimer;
      document.getElementById('clear').onclick = clearTimer;
    </script>
  </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Tea timer</title>
	<style type="text/css">
	#timer {
	margin: 50px auto;
	text-align: center;
	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	}

	#display {
	font-size: 90px;
	}

	#controls {
	margin-top: 20px;
	}
	</style>
	<script type="text/javascript">
	// google analytics
	var _gaq = _gaq \|\| [];
	_gaq.push(['_setAccount', 'UA-19481643-1']);
	_gaq.push(['_setDomainName', '.balinterdi.com']);
	_gaq.push(['_trackPageview']);

	(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();

	var t = null;
	function countDown(){
	if ( decTimer() > 0 ) {
	t = setTimeout(countDown, 1000);
	}
	}

	function decTimer() {
	var newSeconds = secondsLeft() - 1;
	if ( newSeconds >= 0 ) {
	updateTimer(newSeconds);
	}
	return newSeconds;
	}

	function secondsLeft(){
	var timeParts = timer().innerText.split(':');
	var mins = timeParts[0].replace(/^0*/,'');
	mins = mins.length == 0 ? 0 : parseInt(mins);
	var seconds = timeParts[1].replace(/^0*/,'');
	seconds = seconds.length == 0 ? 0 : parseInt(seconds);
	return 60*mins + seconds;
	}

	function updateTimer(seconds){
	var mins = Math.floor(seconds / 60);
	var seconds = seconds % 60;
	var minsString = mins < 10 ? '0' + mins : mins;
	var secsString = seconds < 10 ? '0' + seconds : seconds;
	timer().innerHTML = minsString + ':' + secsString;
	}

	function timer() {
	return document.getElementById('display');
	}
	// END: time handling

	var setTime = [];
	function initializeTimer() {
	var newTimeParts = [];
	for (var i=0; i < 4; i++) {
	var elt = setTime[i] ? setTime[i] : '0'
	newTimeParts[i] = elt;
	}
	// while (timeParts.length < 4) timeParts.push('0');
	newTimeParts.splice(2, 0, ':');
	timer().innerHTML = newTimeParts.join('');
	}

	document.onkeyup = function(e) {
	var e = window.event \|\| e
	var keyPressed = String.fromCharCode(e.keyCode);
	if ( !isNaN(parseInt(keyPressed)) ) {
	setTime.push(keyPressed);
	initializeTimer();
	} else if (e.keyCode == 13) {
	startTimer();
	} else if (e.keyCode == 32) {
	clearTimer();
	} else {
	console.log(e.keyCode);
	}
	}

	function startTimer() {
	_gaq.push(['_trackEvent', 'Timer', 'Start']);
	countDown();
	}

	function stopTimer() {
	_gaq.push(['_trackEvent', 'Timer', 'Stop']);
	clearTimeout(t);
	document.getElementById('start').innerHTML = 'Resume'
	}

	function clearTimer() {
	_gaq.push(['_trackEvent', 'Timer', 'Clear']);
	setTime = [];
	initializeTimer();
	document.getElementById('start').innerHTML = 'Start'
	}

	</script>
	</head>
	<body>
	<div id="timer">
	<div id="display">10:00</div>
	<div id="controls">
	<button id="start">Start</button>
	<button id="stop">Stop</button>
	<button id="clear">Clear</button>
	</div>
	</div>
	<script type='text/javascript'>
	document.getElementById('start').onclick = startTimer;
	document.getElementById('stop').onclick = stopTimer;
	document.getElementById('clear').onclick = clearTimer;
	</script>
	</body>
	</html>