Tuesday, July 21, 2015

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...

No comments:

Post a Comment