Sticky Notes

Create a Posticks (Sticky Notes) app with HTML5, CSS3 and jQuery

by Teylor Feliz

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<header>
  	<h1>posticks</h1>
        <input type="button" value="Add Postick" id="btn-addNote" />
  </header>
  
<div id="board"></div>

CSS

/************ Tags ************/
 
/* Just some basic reset for the body tag */
body {
	background:#F1C387;
	padding:0;
	margin:0;
	font-family: Helvetica, Verdana, Geneva, sans-serif
}
 
header {
	padding-left:20px;
	height:50px;
	display:block;
	background:#0E0300;
	-webkit-box-shadow:0px 2px 5px gray;
	-moz-box-shadow:0px 2px 5px gray;
	box-shadow:0px 2px 5px gray;
	text-align:right;
}
 
h1 {
        color:white;	
        display:inline;
        font-size:210%;	
        padding:15px 10px 0px 0px;
	text-shadow: 1px -1px 0px #999; 
        text-transform:capitalize;
}
 
 
input[type="button"] {
        background:#EFE4DC;
        border:1px solid black;
        -moz-border-radius:5px;
        border-radius:5px;
        color:black;
        font-weight:bold;
        float:left;	
        padding:10px;
	margin:5px 10px 0 0;
        text-shadow: 1px 1px 0px white;
}
 
input[type="button"]:hover {
	background:#E03A00;
	color:white;
	text-shadow: 1px 1px 0px black;
	cursor:pointer;
}
 
/************ Classes ************/
 
.postick {
	border:1px solid gray;
	width:200px;
	height:200px;
	padding:4px;
	font-size:85%;
	background:#FFFC7F;
	-moz-box-shadow:2px 2px 2px #999999;
	-webkit-box-shadow:2px 2px 2px #999999;
	box-shadow:2px 2px 2px #999999;
	position:absolute;
}
 
.toolbar {
	text-align:right;
	font-weight:bold;
}
 
/* Postick's button "delete" */
.delete {
	cursor:pointer;
	font-size:120%;
}
 
/* Content to be editable inside the postick */
.editable {
	cursor:pointer;
	height:180px;
	marging:0 auto;
	width:100%;
	overflow:hidden;
	position:relative;
	-moz-text-shadow: 1px 1px 0px white;
	text-shadow: 1px 1px 0px white;
}
 
.editable:hover{
	border:1px dotted gray;
}

JavaScript

(function ($, $S) {
    //$ jQuery
    //$S window.localStorage
    //Variables Declaration
    var $board = $('#board'),
        //Board where the Posticks are sticked
        Postick, //Singleton Object containing the Functions to work with the LocalStorage
        len = 0, //Length of Objects in the LocalStorage 
        currentNotes = '', //Storage the html construction of the posticks
        o; //Actual Postick data in the localStorage
 
 
 
    //Manage the Posticks in the Local Storage
	//Each postick is saved in the localStorage as an Object  
    Postick = {
        add: function (obj) {
            obj.id = $S.length;
            $S.setItem(obj.id, JSON.stringify(obj));
        },
 
        retrive: function (id) {
            return JSON.parse($S.getItem(id));
        },
 
        remove: function (id) {
            $S.removeItem(id);
        },
 
        removeAll: function () {
            $S.clear();
        }
 
    };
 
    //If exist any postick, Create it/them
    len = $S.length;
    if (len) {
        for (var i = 0; i < len; i++) {
            //Create all posticks saved in localStorage
            var key = $S.key(i);
            o = Postick.retrive(key);
            currentNotes += '<div class="postick"';
            currentNotes += ' style="left:' + o.left;
            currentNotes += 'px; top:' + o.top;
			//data-key is the attribute to know what item delete in the localStorage
            currentNotes += 'px"><div class="toolbar"><span class="delete" data-key="' + key;
            currentNotes += '">x</span></div><div contenteditable="true" class="editable">';
            currentNotes += o.text;
            currentNotes += '</div>';
        }
 
        //Append all the posticks to the board
        $board.html(currentNotes);
    }
 
    //When the document is ready, make all posticks Draggable
    $(document).ready(function () {
        $(".postick").draggable({
            cancel: '.editable',
          "zIndex": 3000,
          "stack"...