Fire JS Bin - time

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

jQuery(function (e) {
  e("#page").time()
});
$.fn.time = function () {
  return this.each(function () {
    function e(a) {
      if ($.isArray(a)) {
        for (var b = [], c = 0, d = a.length; c < d; c++) b[c] = a[c] < 10 ? "0" + a[c] : a[c];
        return b.join(":")
      } else return e([Math.floor(a / 3600), Math.floor(a % 3600 / 60), a % 60])
    }
    function q(a) {
      f = a = a || 0;
      localStorage.setItem(g + $("div.runningName:first").text(), f);
      seconds = a % 60;
      minutes = Math.floor(a % 3600 / 60);
      hours = Math.floor(a / 3600);
      m()
    }
    function m() {
      $("div.runningTime").text(e([hours, minutes, seconds]));
      f++;
      seconds++;
      localStorage.setItem(g + $("div.runningName:first").text(), f);
      if (!(seconds % 60)) {
        minutes++;
        seconds = 0;
        if (!(minutes % 60)) {
          hours++;
          minutes = 0
        }
      }
      n = setTimeout(m, 1E3)
    }
    var r = $(this),
        g = "peterminariktime_",
        o = /^peterminariktime_/,
        f = seconds = minutes = hours = 0,
        n, p = $("#saved"),
        i = $("#start"),
        j = "";
    $("#do").val("What are you going to do?");
    for (var k = 0, s = localStorage.length; k < s; k++) {
      var l = localStorage.key(k);
      if (o.test(l)) j += '<li class="clearfix"><div class="savedTime smallRound">' + e(localStorage.getItem(l)) + '</div><div class="savedName">' + l.split(g)[1] + '</div><a class="resume bigRound" href="#">Resume</a></li>'
    }
    j != "" && $(j).fadeTo(0, 0).appendTo(p).fadeTo(800, 1);
    r.bind({
      start: function (a, b) {
        var c = $(a.target);
        if (!(c.val() == "What are you going to do?" || c.val() == "")) {
          var d = c.val();
          d = '<div id="runningWrapper" class="runningWrapper bigRound"><div class="runningTime smallRound green">' + e([hours, minutes, seconds]) + '</div><div class="runningName">' + d + "</div></div>";
          var h = $(d).hide().insertAfter(c);
          d = h.find("div.runningTime");
          h = h.find("div.runningName");
          var t = b ? localStorage.getItem(g + b) : 0;
          q(t);
          localStorage.getItem(g + h.text());
          c.fadeTo(0, 0).val("").focus();
          d.hide().fadeTo(0, 0).parent().show().end().animate({
            width: "126px",
            marginRight: "16px"
          }, 500, function () {
            $(this).fadeTo(150, 1);
            i.addClass("stop").text("Stop")
          })
        }
      },
      resume: function (a) {
        a = $(a.target).parent();
        var b = a.children(".savedName").text(),
            c = $("#do");
        i.hasClass("stop") && c.trigger("stop");
        c.focus().val(b).fadeTo(0, 0).trigger("start", b);
        a.fadeTo(300, 0).delay(100).slideUp(300, function () {
          $(this).remove()
        })
      },
      stop: function (a) {
        a = $(a.target);
        var b = $("#runningWrapper");
        b.find("div.runningTime");
        var c = b.find("div.runningName");
        clearTimeout(n);
        localStorage.setItem(g + c.text(), f);
        var d = $('<li class="clearfix"><div class="savedTime smallRound">' + e([hours, minutes, seconds]) + '</div><div class="savedName">' + c.text() + '</div><a class="resume bigRound" href="#">Resume</a></li>').hide().prependTo(p);
        a.fadeTo(300, 1).focus();
        b.fadeOut(300, function () {
          d.slideDown(300);
          i.removeClass("stop").text("Start")
        });
        f = seconds = minutes = hours = 0
      },
      clearAll: function () {
        if (confirm("Are you sure you want to delete all recorded times?")) {
          for (var a = localStorage.length; a--;) {
            var b = localStorage.key(a);
            o.test(b) && localStorage.removeItem(b)
          }
          $("#saved li").fadeTo(300, 0).slideUp(300, function () {
            $(this).remove()
          })
        }
      },
      submit: function (a) {
        var b = $(a.target);
        if (b.is("#enterForm")) {
          a.preventDefault();
          $("#start").hasClass("stop") ? b.find("#do").trigger("stop") : b.find("#do").trigger("start")
        }
      },
      focusin: function (a) {
        a = $(a.target);
        a.is("#do") && a.val() == "What are you going to do?" && a.val("").addClass("realValue")
      },
      focusout: function (a) {
        a = $(a.target);
        a.is("#do") && a.val() == "" && a.val("What are you going to do?").removeClass("realValue")
      },
      click: function (a) {
        var b = $(a.target);
        if (b.is("a.resume")) {
          a.preventDefault();
          b.trigger("resume")
        } else if (b.is("#clearAll")) {
          a.preventDefault();
          b.trigger("clearAll")
        }
      }
    })
  })
};

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>time - it's about time</title>
    <meta charset="utf-8">
    <meta name="description" content="A simple time tracking Application. Just type what you're about to do next and hit Start.">
    <link type="text/css" rel="stylesheet" href="/attach/typekit.css" />
  </head>
  
  <body>
    <div id="page">
      <header class="grid_12">
        <h1>time <span>it's about time</span></h1>
      </header>
      <div id="main" class="clearfix">
        <div id="enter" class="clearfix">
          <form action="#" id="enterForm">
            <div id="doWrap" class="grid_10">
              <input type="text" id="do" name="do" autocomplete="off" class="bigRound"/>
            </div>
            <div id="submitWrap" class="grid_2">
              <button type="submit" name="start" id="start" class="bigRound green">Start</button>
            </div>
          </form>
        </div>
        <ul id="saved" class="grid_12"></ul>
      </div>
      <footer class="grid_12"><a id="clearAll" href="#">Clear all</a></footer>
    </div>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </body>

</html>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
:focus { outline:0; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse; border-spacing:0; }
body { background-color:white; color:#444; font:112.5%/1.4 "museo-sans-1", "museo-sans-2", Tahoma, Arial, sans-serif; overflow-y:scroll; }
.grid_12, .grid_10, .grid_2 { display:inline; float:left; margin-left:10px; margin-right:10px; position:relative; width:940px; }
.grid_10 { width:780px; }
.grid_2 { width:140px; }
#page { margin:0 auto; width:960px; }
header { color:#989595; display:block; font-size:62px; font-weight:bold; line-height:1; margin:45px 10px 120px 10px; position:relative; text-shadow:-1px -1px 0 rgba(55, 55, 55, 0.7); }
header span { font-size:23px; font-weight:normal; position:absolute; bottom:7px; right:0; text-shadow:none; }
footer { border-top:1px solid #d6d6d6; font-size:.8em; margin-bottom:20px; padding:7px; }
a { color:#7ba285; text-decoration:none; }
a:hover, a:focus { background-color:#7ba285; color:white; }
a:active { background-color:transparent; color:#7ba285; }
#enter { clear:both; }
.bigRound, .smallRound { border:1px solid rgba(180, 180, 180, 0.6); -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; font-size:26px; font-weight:bold; padding:5px 0; text-align:center; text-shadow:1px 1px 0 rgba(255, 255, 255, 0.6); width:140px; }
.smallRound { -moz-box-shadow:0 1px 1px rgba(55, 55, 55, 0.2); -webkit-box-shadow:0 1px 1px rgba(55, 55, 55, 0.2); box-shadow:0 1px 1px rgba(55, 55, 55, 0.2); float:left; font-size:inherit; padding:4px 0 3px; }
.green { background:#c1dcb5 url(/attach/bgRunningTime.png) repeat-x 0 0; border-color:rgba(133, 163, 129, 0.5); }
.stop { background:#dfb8bc url(../img/bgStop.png) repeat-x 0 0; border-color:rgba(163, 129, 139, 0.5); }
#do, #runningWrapper { font-size:1em; font-weight:normal; background:white url(/attach/bgDo.png) repeat-x 0 0; border-color:#d6d6d6; color:#AAA; padding:11px 10px; text-align:left; width:760px; }
#runningWrapper { background:white; color:#444; padding:5px 10px 5px 6px; position:absolute; left:0; top:0; width:763px; }
#do:focus, #do.realValue { color:#444; }
.resume { -moz-transition:background, border-color .3s ease-out; -webkit-transition:background, border-color .3s ease-out; transition:background, border-color .3s ease-out; background:none; border-color:white; color:#eee; float:right; margin:-8px 0; padding:7px 0; }
li:hover .resume, .resume:focus { background:#c1dcb5 url(../img/bgRunningTime.png) repeat-x 0 0; border-color:rgba(133, 163, 129, 0.5); color:#444; }
.runningTime { width:0; }
.runningName, .savedName { float:left; margin:0 10px 0 4px; padding:5px 0; width:600px; }
.savedTime { background:#ededed url(../img/bgSavedTime.png) repeat-x 0 0; border-color:rgba(180, 180, 180, 0.6); margin-right:16px; width:126px; }
#start:hover, #start:focus, .resume:hover, .resume:focus { -moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.2); box-shadow:0 0 5px rgba(0, 0, 0, 0.2); cursor:pointer; }
#start:active, .resume:active { -moz-box-shadow:inset 0 2px 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0 2px 5px rgba(0, 0, 0, 0.4); box-shadow:inset 0 2px 5px rgba(0, 0, 0, 0.4); }
#saved { margin:80px 10px; }
#saved li { -moz-transition:border-color .3s ease-out; -webkit-transition:border-color .3s ease-out; transition:border-color .3s ease-out; border:1px solid white; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; background-color:white; border-color:white; margin-bottom:5px; padding:7px 0 7px 7px; }
#saved li:hover { border-color:#d6d6d6; }
.clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height: 0; }
#do { font-family:"museo-sans-1","museo-sans-2",sans-serif; }

Pop out