Fire JS Bin - task-force

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

Find

⟲

Replace

llst = localStorage;
Task = function (a, b, c, d, e, h) {
  this.l = a;
  this.id = b;
  this.ca = "";
  this.I = e;
  this.q = h || false;
  this.M = null;
  this.J = 0;
  this.fa = d;
  this.g = this.s = Math.round(d * 60);
  this.o = this.j = this.u = this.t = this.z = this.w = this.c = null;
  this.create(b, c, d, e)
};
Task.prototype = {
  B: function () {
    this.v();
    this.l.D.push(this);
    this.g = this.s;
    this.start()
  },
  v: function () {
    var a = this;
    this.j && this.j.click(function () {
      a.co()
    });
    this.o.click(function () {
      a.remove()
    });
    this.q && $("#z").bind(this.q, function () {
      a.co()
    })
  },
  create: function (a, b, c, d) {
    this.c = $("<div>").addClass("tk cf").hide();
    this.z = $("<div>").addClass("fi");
    this.t = $("<div>").attr({
      id: "timeLeft-" + a
    }).addClass("tml").text(f(this.g));
    this.u = $("<div>").addClass("wrn");
    this.w = $("<span>").addClass("mark").html("✓").hide();
    this.c.append($("<div>").addClass("l num").append(a).append(this.w)).append($("<div>").addClass("r").append($("<div>").addClass("tdesc").text(b)).append($("<div>").addClass("pro").append(this.z)).append(this.t).append(this.u));
    if (!d) {
      this.j = $("<button>").addClass("dn").text("Done!");
      this.c.append(this.j)
    }
    this.o = $("<button>").addClass("rm").text("Remove").hide();
    this.c.append(this.o);
    $("#z").prepend(this.c);
    this.B()
  },
  start: function () {
    var a =
    this;
    this.c.slideDown();
    this.l.p.push(this);
    this.M = setInterval(function () {
      a.Z()
    }, 1E3);
    this.I || $("#z").trigger("utSt")
  },
  stop: function () {
    var a = this;
    this.q && $("#z").unbind(this.q);
    clearInterval(this.M);
    this.t.hide();
    var b = jQuery.inArray(this, this.l.p);
    b >= 0 && a.l.p.splice(b, 1);
    this.I ? setTimeout(function () {
      a.remove()
    }, 4500) : this.o.show();
    $("#z").trigger("tStp")
  },
  co: function () {
    this.stop();
    this.c.addClass("co");
    this.j && this.j.hide();
    this.o.show();
    this.w.show();
    $("#z").trigger("tCpl")
  },
  R: function () {
    this.stop();
    this.c.removeClass("cau").addClass("fld");
    this.u.text("Failed, sorry").show();
    $("#z").trigger("tFl")
  },
  remove: function () {
    var a = this;
    this.c.fadeOut(function () {
      a.c.remove();
      var b = jQuery.inArray(a, a.l.D);
      b >= 0 && a.l.D.splice(b, 1)
    });
    $("#z").trigger("taskRemoved")
  },
  Z: function () {
    this.g--;
    this.t.text(f(this.g));
    this.J = (this.s - this.g) * 100 / this.s;
    this.z.width(this.J * 2 + "px");
    if (this.g <= 10) {
      this.c.addClass("cau");
      this.u.hide().text("Hurry up!").fadeIn()
    }
    this.g == 0 && this.R()
  }
};
TaskForce = function () {
  this.D = [];
  this.p = [];
  this.U = 0;
  this.O = null;
  this.G = 0;
  this.x = "taskforce_";
  this.e = "";
  this.n = "Your name here, please";
  this.value = this.k = this.f = 0;
  this.B()
};
TaskForce.prototype = {
  B: function () {
    $("#yN").val(this.n).addClass("ey");
    this.v();
    this.V();
    this.A();
    this.H();
    this.K()
  },
  v: function () {
    var a = this;
    $("#ix").bind("click focus", function (c) {
      c.stopPropagation();
      a.C(true)
    });
    $("#go").click(function () {
      a.L()
    });
    $("#mi").keypress(function (c) {
      c.keyCode == 13 && a.L()
    });
    var b = $("#yN");
    b.focus(function () {
      var c = $(this);
      c.removeClass("ey");
      if (c.val() == a.n || c.val() == "") c.val("")
    });
    b.bind("change blur", function () {
      var c = $(this);
      if (c.val() == a.n || c.val() == "") c.val(a.n).addClass("ey")
    });
    b.keypress(function (c) {
      c.keyCode == 13 && b.val() != a.n && a.$()
    });
    $("#cl").click(function (c) {
      c.preventDefault();
      a.P()
    });
    $("#z").bind("tCpl", function () {
      a.W()
    });
    $("#z").bind("tFl", function () {
      a.X()
    });
    $("#z").bind("tStp", function () {
      a.Y()
    })
  },
  W: function () {
    this.f++;
    this.A()
  },
  X: function () {
    this.k++;
    this.A()
  },
  Y: function () {
    if (this.p.length < 1 || !this.e) this.K()
  },
  H: function () {
    if (this.e) {
      $("#nF").hide();
      $("#nm").text(this.e).fadeIn();
      $("#rt").slideDown()
    } else {
      $("#nm").hide();
      $("#rt").hide();
      $("#nF").show()
    }
  },
  $: function () {
    var a = $.trim($("#yN").val());
    if (a) {
      this.e = a;
      llst[this.x + "user"] = this.e;
      this.H();
      $("#z").trigger("nSe")
    }
  },
  C: function (a) {
    var b = this;
    if (a) {
      $("#nTI").hide();
      $("#nTA").show();
      $("#dc").focus();
      $(document).bind("click", function (c) {
        !jQuery.contains(document.getElementById("nTA"), c.target) && document.getElementById("nTA") != c.target && b.C(false)
      })
    } else {
      $("#nTI").show();
      $("#nTA").hide();
      $(document).unbind("click")
    }
  },
  L: function () {
    var a = $.trim($("#dc").val()),
        b = $.trim($("#mi").val());
    if (!b || !(b - 0 == b && b.length > 0)) b = 1;
    if (b <= 0) b = 0.17;
    if (b > 120) b = 120;
    a || (a = "Wanted ME to think over YOUR tasks? :) Add something yours next time!");
    this.F(a, b, false, null);
    this.C(false);
    $("#dc").val("");
    $("#mi").val("1")
  },
  F: function (a, b, c, d) {
    var e = ++this.U;
    return new Task(this, e, a, b, c, d)
  },
  K: function () {
    var a, b = null;
    if (this.e) {
      switch (this.G) {
      case 0:
        a = "Add some task to start working until time runs out!";
        break;
      default:
        a = "You have to add tasks to keep yourself concentrated.";
        break
      }
      b = "utSt";
      this.G++
    } else {
      a = "Type in your name right there, in the form above.";
      b = "nSe"
    }
    this.O = this.F(a, 1, true, b)
  },
  A: function () {
    this.value = this.f == 0 && this.k == 0 ? 100 : Math.round(100 / (this.f + this.k) * this.f);
    $("#cCo").text(this.f);
    $("#fCo").text(this.k);
    $("#fx").text(this.value + "%");
    if (this.e) {
      llst[this.x + "completed"] = this.f;
      llst[this.x + "failed"] = this.k
    }
    if (this.value > 75) {
      $("#ur").removeClass("avg bad");
      $("#av").text(":-)")
    }
    if (this.value <= 75 && this.value > 50) {
      $("#ur").removeClass("bad").addClass("avg");
      $("#av").text(":-|")
    }
    if (this.value <= 50) {
      $("#ur").removeClass("avg").addClass("bad");
      $("#av").text(":-(")
    }
  },
  V: function () {
    this.e = llst.getItem(this.x + "user") || "";
    this.f = Number(llst.getItem(this.x + "completed")) || 0;
    this.k = Number(llst.getItem(this.x + "failed")) || 0
  },
  P: function () {
    var a = RegExp("/^" + this.x + "/");
    a.compile();
    if (confirm("Do you want to clear your stats?")) {
      for (var b = llst.length; b--;) {
        var c = llst.key(b);
        a.test(c) && llst.removeItem(c)
      }
      history.go(0)
    }
  }
};

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>TaskForce - Brute-force your infinite tasks flow!</title>
    <meta charset="utf-8" />
    <meta name="description" content="Task Concentration App" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <div id="cnr">
      <header>
        <h1>task<span>force</span></h1>
        <h2>No pause. No stand-by. Pure concentration.</h2>
        <p class="ht">
          Finish all work before closing a browser. Only name and stats are saved
          for tomorrow.
        </p>
      </header>
      <section id="ur" class="cf">
        <div id="av">:-)</div>
        <div id="nm"></div>
        <div id="nF"><input id="yN" name="yN" type="text" autocomplete="off" /></div>
        <div class="cl"><a href="#" id="cl">Clear</a></div>
        <div id="rt">
          <div class="m">
            Done: <span id="cCo">0</span>, Failed: <span id="fCo">0</span>
          </div>
          <div class="v">Business value: <span id="fx"></span></div>
        </div>
      </section>
      <section class="forms">
        <div class="arr"></div>
        <div id="nTI">
          <input name="ix" id="ix" type="text" value="New task..." />
        </div>
        <div id="nTA" class="cf">
          <textarea name="dc" id="dc" rows="7" autocomplete="off">

Minutes to complete

10 seconds to 2 hours

* { margin:0; padding:0 }
body, html { background:#202020 url(/attach/bg.gif) repeat scroll top left; font-family:Arial, sans-serif; height:100% }
body, html, #ur #cl:focus #ur #cl:active, #ur #cl:hover, #rt .v, .tk .num, .tk .tdesc, .tk .wrn, .tk .rm { color:#fff }
body { margin:40px 0 20px }
h2, h1 { font-weight:100 }
textarea, button, input { font-family:Arial }
#cnr { margin:0 auto; width:500px }
header { display:inline-block; margin:0 0 40px 0 }
h1 { font-size:60px; letter-spacing:-2px }
#ur #fx, .tk .mark, .tk.co .num, h1 span { color:#00d2ff }
h1 span, #ur #av, #rt .v, #ix, label, #go, .tk .num, .tk .wrn, .tk .rm, .tk .dn { font-weight:bold }
h2, #rt .v, #dc, #mi, label { font-size:16px }
p.ht, #rt, .sb, .tk .tml, .tk .rm, .tk .dn { font-size:11px }
p.ht, #ur #cl, #rt { color:#777 }
section { margin:0 0 40px }
section, label, #z, .cf:after { display:block }
#ur, #nTA, #nTI, .tk { position:relative }
#ur { margin:10px 0 }
#ur #av, .tk .l { width:50px }
#ur #av { border:5px #00d2ff solid; text-align:center; font-size:30px; padding:5px 0 10px; margin:0 0 15px }
#ur #av, .tk .l, .tk .mark, .tk .pro, .tk .fi, .tk .tml { float:left }
#ur.avg #av { border-color:#fc0 }
#ur.bad #av { border-color:#e50000 }
#ur #nm, #ur #nF { padding:0 60px 3px 70px }
#ur #nm { font-size:22px }
#ur #nm, #rt, .tk.fld .dn, #nTA { display:none }
#yN, #go, .tk .mark { font-size:18px }
#yN { padding:4px; width:60% }
#yN, #ix, #go, .tk .rm, .tk .dn { border:0 }
#go, #yN, #nTA, #nTI, #ix, .tk .rm, .tk .dn { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px }
#yN.ey { color:#999 }
#yN:focus { -moz-box-shadow:0 0 8px rgba(77, 210, 238, 0.8); -webkit-box-shadow:0 0 9px rgba(77, 210, 238, 0.6); box-shadow:0 0 8px rgba(77, 210, 238, 0.8); border-color:rgba(77, 210, 238, 0.75) !important }
#yN:focus, #ix:focus { outline:none }
#ur .cl, #go, .tk .rm, .tk .dn { position:absolute }
#ur .cl { top:0 }
#ur .cl, .tk .rm, .tk .dn { right:0 }
#ur #cl { font-size:12px }
#rt { margin:2px 0 5px 70px }
#ur.avg #fx { color:#fc0 }
#ur.bad #fx { color:#e50000 }
.arr { margin:10px 0 0 10px; width:18px; height:17px; background:transparent url(/attach/arr.gif) no-repeat scroll left bottom }
#nTA, #nTI, .tk .fi, .tk .rm, .tk .dn, .tk.co .rm { background:#00d2ff }
#nTA, #nTI { padding:15px }
#ix { width:460px; height:24px; padding:8px 5px 6px 5px; font-size:20px; line-height:28px }
#dc { width:100%; margin:0 0 5px }
#dc, #mi { border:1px #00a7cb solid }
#mi { padding:2px 0; width:70px }
label, .tk .wrn, .cf:after { clear:both }
label { margin:2px 0 }
.sb { color:#00a7cb }
#go { background:#00a7cb; width:120px; right:15px; bottom:15px; height:35px }
#go, .tk { margin:10px 0 0 0 }
#go, .tk .rm, .tk .dn { cursor:pointer }
#go:hover { background:#fff }
#z { margin:10px 0 20px 0 }
.tk { padding:0 0 20px }
.tk .r { margin-left:55px; width:auto }
.tk .num { font-size:24px }
.tk .mark { display:''; margin:6px 5px 5px -20px }
.tk.cau .num, .tk.fld .num { color:#df0000 }
.tk .tdesc { font:18px georgia; padding:5px 65px 10px 0 }
.tk.co .tdesc { text-decoration:line-through }
.tk.fld .tdesc { color:#d5bfbf }
.tk .pro, .tk .fi { height:15px }
.tk .pro { width:200px; background:#333 }
.tk .fi { width:0 }
.tk.cau .fi, .tk.fld .fi, .tk .rm { background:#e50000 }
.tk .tml { color:#9e9a90; padding:0 5px }
.tk .wrn { padding:3px 0 0 }
.tk .rm, .tk .dn { top:5px; padding:5px 8px }
.tk.co .rm, .tk .rm:hover, .tk .dn:hover { color:#000 }
.tk .rm:hover, .tk .dn:hover { background:#fff }
.cf:after { content:"."; height:0; visibility: hidden }