Fire JS Bin - Spendo

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

Find

⟲

Replace

$(function () {
  var p = localStorage,
      t, m, z, e, o = "slow",
      k = new Date(),
      h, b = "needs numbers please! :)",
      B, a = 1000 * 60 * 60 * 24,
      g, x = false,
      C = parseFloat,
      w = JSON.parse,
      s = JSON.stringify;
  k.setHours(0, 0, 0, 0);
  h = k.getTime();
  if (!p.sd) {
    t = 0;
    u();
    m = {
      pp: [e]
    };
    z = m.pp[0]
  } else {
    m = w(p.sd);
    t = m.pp.length - 1;
    z = m.pp[t];
    B = (h - z.lu) / (a);
    if (B) {
      z.np -= B;
      z.lu = h;
      n()
    }
    z.np <= 0 ? q() : 0;
    $.each(z, function (f, d) {
      if (f != "ex" || f != "lu") {
        $("#" + f).val(d);
        if (f == "iq") {
          i(d)
        }
      }
    });
    v();
    $.each(z.ex, function (f, d) {
      D(d.ca, d.it, d.am, f)
    });
    j()
  }
  $("#ps").submit(function () {
    if (!A($("#i").val())) {
      alert("Pay amount " + b);
      return x
    }
    if (!A($("#cb").val())) {
      alert("Current funds " + b);
      return x
    }
    z.i = C($("#i").val());
    z.iq = C($("#iq").val());
    z.np = C($("#np").val());
    z.cb = C($("#cb").val());
    if (!z.np) {
      z.np += z.iq
    }
    n();
    $("#s1").slideUp(o, function () {
      $("#gl li").removeClass();
      $("#x").parent().addClass("sl");
      v();
      $("#s2").slideDown()
    });
    return x
  });
  $("#iq").change(function () {
    i($(this).val())
  });
  $("#ane a").click(function () {
    if ($("#nEx").is(":hidden")) {
      $("#nEx").slideDown();
      $(this).text("Close")
    } else {
      $("#nEx").slideUp();
      $(this).text("Create new expense")
    }
    return x
  });
  $("a.v").click(function () {
    var d = $(this).attr("href");
    y("#q > section[id!=" + d.replace("#", "") + "]", d);
    return x
  });
  $("#nEx").submit(function () {
    if (!z.i) {
      alert('Please fill in "Your pay" section first');
      return x
    }
    if (!A($("#am").val())) {
      alert('"I spent" ' + b);
      return x
    }
    if (!$("#it").val().length) {
      alert('Sorry, "Precisely" needs text :)');
      return x
    }
    z.ex.push({
      ca: $("#ca :selected").text(),
      it: $("#it").val(),
      am: $("#am").val()
    });
    r(-$("#am").val());
    n();
    D($("#ca :selected").text(), $("#it").val(), $("#am").val(), z.ex.length - 1);
    j();
    $(this)[0].reset();
    return x
  });
  c();

<!DOCTYPE HTML>
<html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <title>Spendo</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <div id="q" class="b c">
      <header><h1 id="pc">Spend <b class="r">o</b></h1></header>
      <nav id="gl" class="bb">
        <ul>
          <li class="sl"><a href="#s0" class="v">About</a></li>
          <li><a href="#s1" class="v">Your Pay</a></li>
          <li><a href="#s2" id="x" class="v">Expenses</a></li>
          <li><a href="#re" class="v">History</a></li>
        </ul>
      </nav>
      <section id="s0" class="s c">
        <h1>Spend <b class="r">o</b></h1>
        <h2>Keep track of your money,<br/>one purchase at a time.</h2>
        <p class="instruct">Using Spendy is easy:</p>
        <ol>
          <li>Tell us about <a href="#s1" class="v">your pay</a></li>
          <li>Record your <a href="#s2" class="v">expenses</a></li>
          <li>Review your <a href="#re" class="v">history</a></li>
        </ol>
      </section>

<section id="s1" class="s h">
        <h1>Your Pay</h1>
        <form method="post" id="ps" action="#">
          <fieldset>
            <ul>
              <li>
                <label for="i">I get paid <span class="dol z">$</span></label>
                <input type="text" id="i" title="amount in dollars" size="10" class="dAmt"/>
              </li>
              <li>
                <label for="iq">every</label>
                <select id="iq">
                  <option value=""></option>
                  <option value="7">week</option>
                  <option value="14">fortnight</option>
                  <option value="31">month</option>
                </select>
              </li>
              <li>
                <label for="np">Pay day is</label>
                <select id="np" disabled="disabled">
                  <option value=""></option>
                </select>
              </li>
              <li>
                <label for="cb">I've got <span class="dol z">$</span></label>
                <input type="text" id="cb" size="10" title="amount in dollars" class="dAmt"/>
                <span class="ad j">available</span>
              </li>
              <li><button id="sS" type="submit" class="bR">Save</button></li>
            </ul>
          </fieldset>
        </form>
      </section>
      <section id="s2" class="tP h c s">
        <h1>Expenses</h1>
        <p>Currently</p>
        <section id="bd" class="c tt">
          <span id="aI">$0</span>
          <div id="pi">
            <span id="av">Available</span>
            <span id="ds">
              <span id="dsL" class="r">0</span>
              <span id="dM"><b class="r">days</b> till pay day</span>
            </span>
          </div>
        </section>
        <section id="ex" class="c j u">
          <span id="ane">
            <a href="#" class="cr bR">enter new expense</a>
          </span>
          <form method="get" id="nEx" action="#" class="h">
            <ul>
              <li>
                <label for="am">I spent <span class="dol z">$</span></label>
                <input type="text" id="am" title="amount in dollars" size="10" class="dAmt"/>
              </li>
              <li>
                <label for="ca">on</label>
                <select id="ca">
                  <option value="gr">Housing/rent</option>
                  <option value="b">Bills</option>
                  <option value="c">Credit/Loans</option>
                  <option value="e">Eating out</option>
                  <option value="g">Groceries</option>
                  <option value="gi">Kids/Pets</option>
                  <option value="h">Health</option>
                  <option value="cl">Clothes</option>
                  <option value="p">Partying</option>
                  <option value="s">Savings</option>
                  <option value="t">Transport</option>
                  <option value="m">Other</option>
                </select>
              </li>
              <li>
                <label for="it">precisely</label>
                <input type="text" id="it" size="10" class="" />
              </li>
              <li><button id="nES" type="submit" class="bR">save</button></li>
            </ul>
          </form>
          <table id="e">
            <thead><tr class="tt"><th>Expense</th><th>Amount</th></tr></thead>
            <tbody></tbody>
          </table>
        </section>
      </section>

<section id="re" class="h s j u">
        <h1>History</h1>
        <div id="res" class="j"><p>No expenses recorded</p></div>
      </section>
    </div>
  </body>

</html>

* { list-style:none; outline:0; text-decoration:none; padding:0 }
*, .s ol li, .s p, .s ol li, label, input[type=text], select { margin:0 }
html { font:100% Arial }
body { font-size:62.5% }
.c { overflow:hidden }
.c, #e { width:100% }
.b, input[type=text], select { border:1px solid #CCC }
ol a, .r { color:red }
.bb, th, td { border-bottom:1px solid #CCC }
#q { width:32em; min-height:48em; background:#fafafa; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; margin:4em auto }
header, input[type=text], select, .u, #ds, #av { display:block }
header, tr.en:hover { background:#EEE }
#pc { font:bold 1.8em/1.25em Arial; padding:.5em 16px }
#gl { width:302px; padding:0 0 10px 18px; background-color:#eee; background:-moz-linear-gradient(center bottom, rgb(221, 221, 221)25%, rgb(238, 238, 238)89%) }
#gl .v { display:inline; width:auto; font:1.2em/1.8em Arial; text-shadow:1px 1px 1px #FFF; color:#333; padding:2px 13px }
#gl .v:hover { background:#DDD }
#q #gl .sl a, #nES, #sS, .cr, .id { color:#FFF }
#q #gl .sl a { background:#999; text-shadow:none }
option { padding:2px 5px 0 }
#s0 { padding:0 0 50px 20px }
.s { width:28em; padding:0 20px }
.s h1 { font:bold 2.4em/1em Arial; padding-top:0; color:#555; margin:1em 0 }
.s h2, .ad { font:bold 1.6em/1.2em Arial }
.s h2, input[type=text], select { color:#666 }
.s h2 { margin:.5em 0 }
.in { font:1.2em/1.7em Arial }
.s ol li, .s p { font:1.2em/1.6em Arial }
.s ol { margin:1em 0 0 2em }
.s ol li { list-style:decimal }
ol a { text-decoration:underline }
fieldset { border:0; margin-top:1.4em }
label { font:1.6em/1.25em Arial; left:-111px; top:7px; width:100px }
label, tr.en td:last-child { text-align:right }
label, .z { position:absolute }
input[type=text], select { font:1.6em Arial; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:.5em .4em }
select:focus, input:active, input:focus { border:1px solid #54cc14; -moz-box-shadow:0 0 7px rgba(84, 204, 20, 0.2); -webkit-box-shadow:0 0 7px rgba(84, 204, 20, 0.2) }
.s select { padding-right:10px; height:36px }
.ad { top:-1.8em; color:#AAA; margin:0 106px }
#nES, #sS { font:bold 1.6em Arial; border:transparent; background:#1485cc; margin:0 0 2em; padding:.3em 1em }
#aI { font:bold 4em/1.5em Arial; max-width:158px }
#dsL, #dM, #av { font:bold 1.1em/1.3em Arial }
#ds, .cat { color:#999 }
#pi { margin:1.6em 0 0 .8em }
#nEx, .h, #re { display:none }
#nEx { margin:20px 0 0 }
.cr { font:1.4em/1.1em Arial; display:inline-block; background:#444; padding:8px 1.5em }
#q .bR:hover, .id, .bar { background:red }
#ps li, #nEx li, .j { position:relative }
#ps li, #nEx li { margin:0 0 10px 95px }
#e { font-size:1em; border-collapse:collapse; margin:2em 0 }
th { font-size:1.2em Arial; text-align:left; border-bottom:1px solid #000; padding:0 0 0 15px }
th, td { padding:11px 0 8px }
.cat, .fig { font:bold 1.1em Arial }
.sc { font:bold 1.6em/1.5em Arial }
.tt { text-transform:uppercase }
.da { font:bold 1.8em Arial; margin:10px 0 0 }
.id { visibility:hidden; opacity:.3; font:1em/1em Arial; width:20px; height:20px; top:0; left:-30px; text-align:center }
.id:hover { opacity:1 }
tr.en { width:120% }
#q tr.en:hover .id { visibility:visible }
tr th:first-child, tr.en td:first-child { width:233px }
tr.en td:last-child, .fig { width:60px }
#re .cat { margin:15px 0 5px }
#re a { width:15px; font:1.8em/1.4em Arial }
.bar { height:15px; width:2px }
.fig { right:-65px; top:1px; text-indent:0 }
.dol { right:-25px }
#q .dAmt { padding-left:18px; width:4.5em }
.v, .bR { -webkit-border-radius:2em; -moz-border-radius:50%; border-radius:2em }
#res { margin:-10px 0 }
.x { text-indent:-9999px }
#s2 p { margin:-8px 0 }
#gl, #gl .v, .s, #aI, #pi, #re, #re a, #res { float:left }
.aI, .s h2, h1, #pc { letter-spacing: -1px }

Pop out