Fire JS Bin - SmallDoc

$(document).ready(function () {
  if (!localStorage.getItem('docFileCount')) {
    $("ul.docList").after('<p class="first-time"><a href="#" id="addFirst"><span>+</span><br />Create your first note</p>');
  }
  for (i = 1; i <= localStorage.getItem('docFileCount'); i++) {
    if (localStorage.getItem("doc" + i + "_title") != '' && localStorage.getItem("doc" + i + "_title") != 0) {
      $("ul.docList").append('<li><a id="item_' + i + '" href="#">' + localStorage.getItem("doc" + i + "_title") + '</a></li>');
    }
  }
  function loadDocData(id) {
    $("#existing").val(id);
    $("#title").val(localStorage.getItem("doc" + id + "_title"));
    $("#content").val(localStorage.getItem("doc" + id + "_content"));
  }
  $("#submit").click(function () {
    if ($("#existing").val()) {
      var id = $("#existing").val();
    } else {
      var submitCount = localStorage.getItem('docFileCount');
      var id = Number(submitCount) + 1;
      localStorage.setItem('docFileCount', id);
    }
    localStorage.setItem("doc" + id + "_title", $("#title").val());
    localStorage.setItem("doc" + id + "_content", $("#content").val());
  });
  $("ul.docList li a").click(function () {
    var id = $(this).attr("id").replace("item_", "");
    $(".list,.edit,#addNew").toggle();
    loadDocData(id);
  });
  $("#addNew,#addFirst").click(function () {
    $(".list,.edit,#addNew").toggle();
    $("#content,#title").val("");
  });
  $("#cancel").click(function () {
    $(".list,.edit,#addNew").toggle();
  });
});

<!DOCTYPE html>
<html manifest="smalldoc.manifest">
  
  <head>
    <title>SmallDoc</title>
    <meta charset="utf-8">
    <meta name="description" content="Simple note taking for your browser or mobile device">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="img/appIcon.png" />

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <div class="header">
      <h1>SmallDoc</h1>
      <a id="addNew" href="#">+</a>
    </div>
    <div class="list"><ul class="docList"></ul></div>
    <div class="edit">
      <form id="app">
        <input type="hidden" id="existing" value="" />
        <p>
          <label for="title">Title:</label>
          <input type="text" name="title" id="title" />
        </p>
        <p>
          <label for="content">Content:</label>
          <textarea rows="10" name="content" id="content">

body { background:#C5CCD3; font-family:Helvetica, sans-serif; margin:0px 0px 0px 10px; padding:0px }
.header { background:transparent url("/attach/gradient.png") repeat-x 0 0; border-bottom:1px solid #2E3744; margin:0px 0px 0px -10px; min-height:44px; padding:0 }
h1 { color:#FFF; font-family:Helvetica, Arial, sans-serif; font-size:20px; font-weight:bold; left:50%; line-height:30px; margin:2px 0px 0px -24%; overflow:hidden; padding:5px 0px; position:absolute; text-align:center; text-shadow:#2D3642 0px -1px 0px; top:0px; white-space:nowrap; width:49% }
ul { background:#FFF; border:1px solid #B4B4B4; border-bottom-left-radius:8px 8px; border-bottom-right-radius:8px 8px; border-top-left-radius:8px 8px; border-top-right-radius:8px 8px; color:black; font-family:Helvetica, Arial, sans-serif; font-size:17px; font-weight:bold; left:50%; line-height:normal; margin:15px 10px 17px 0px; padding:0 }
li { border-top:1px solid #B4B4B4; color:#666; list-style-type:none; padding:10px }
li:first-child { border-top:0px; border-top-left-radius:8px 8px; border-top-right-radius:8px 8px }
ul li a, li.img a+a { color:black; display:block; margin:-10px; overflow:hidden; padding:12px 10px; text-decoration:none; white-space:nowrap }
label { color:#0C0C0C; display:block; font-family:'Helvetica Neue', Helvetica, sans-serif; font-weight:bold; margin:0px; padding:0px; text-shadow:white 0px 1px 0px }
form { padding:0 20px 0 0 }
input[type=text] { display:inline-block; font-size:1.2em; margin-left:0px; padding:0px 4px; resize:none; width:100% }
textarea { display:inline-block; font-size:1.2em; margin-left:0px; padding:0px 4px; resize:none; width:100% }
input:focus, textarea:focus { outline:0 }
.footer { color:#929599; font-size:0.7em }
.footer a { color:#929599 }
.footer a:hover { text-decoration:none }
.edit { display:none }
#addNew { color:white; display:block; font-size:29px; padding:0px 10px; text-decoration:none; top:3px; right:12px; position:absolute }
p.first-time { background:white; border-radius:10px; color:#999; margin:0px 10px 0px 0px; padding:40px 20px 90px; text-align:center }
p.first-time span { color:#AAA; text-shadow:#2D3642 0px -1px 0px; font-size:170px }
p.first-time a { color:#999; text-decoration:none }
p.first-time a span { color: #AAA }