bookmarklet: standup timer redux!

A while back I made a web-based two minute timer (which I found useful for managing time during scrum standups) It was ok, but frustrating when I was sharing my screen, because I'd prefer to run the JIRA board maximized, and that webpage wasn't very space efficient.

I decided to make a bookmarklet that would inject a super minimalist timer into whatever page I was looking at: a tiny button in the topcorner, a red bar when time has expired (after two minutes) .

It's a little tricky to add a bookmarklet; I find it easier to bookmark any page, and then edit it, copy and pasting to replace the URL with this code:

javascript:
(function(){
    var targetTimeInSeconds = 120;
    var startTime;
    var timer;
    var timer_restart = function(){
        elemDiv.style.backgroundColor = 'transparent';
        elemDiv.style.width = 'auto';
        startTime = Date.now();
        if(timer) clearInterval(timer);
        timer = setInterval(update_timer_display,100);
    };
    var update_timer_display = function(){
        var time = Math.floor((Date.now() - startTime)/1000);
        elemInput.setAttribute('value', secondsToMSS(time));
        if(time >= targetTimeInSeconds){
            elemDiv.style.backgroundColor = 'red';
            elemDiv.style.width = '100%';
        }
    };
    var secondsToMSS = function(time){
      var min = Math.floor(time/60);
      var sec = time % 60;
      var sec = sec.toString();
      while(sec.length < 2) sec = "0"+sec;
      return min+":"+sec;
    };
   
    var elemDiv = document.createElement( 'div' ) ;
    var elemInput = document.createElement("input");
    elemInput.setAttribute('type', 'button');
    elemInput.setAttribute('value', 'timer');
    elemInput.addEventListener("click", timer_restart);
    elemDiv.appendChild(elemInput);
    elemDiv.style.position="fixed";
    elemDiv.style.left='0';
    elemDiv.style.top='0';
    elemDiv.style.zIndex='20';
    document.body.appendChild( elemDiv ) ;
})();

There's a lot of little things that went into making this: make it a self-executing function made a lot of sense, so it wouldn't interfere with anything on the page. And it's a good exercise in DOM manipulation without jQuery.

It's meant to be easily customized, if you didn't like the color or CSS or if 120 seconds isn't your ideal time...