Simple Note Taking App with jQuery and Local Storage - takenotes

takenotes is a simple jQuery based note taking app which allows the users to write drag'ndrop notes on your webpage that are stored in the client side using Html5 local storage API.

Features:

• Shift-click a note to delete it.
• Click any empty spot to create a new note.
• Notes are automatically preserved for you between page visits

How to use it:

1. Load jQuery library and the jQuery takenotes plugin's files in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="Notes.js"></script>
<script src="board.js"></script>

2. Load jQuery UI library for drag and drop support.

<script src="jquery-ui.min.js"></script>

3. Create a board for the note taking app.

<div id="board"> </div>

4. Style the board & notes whatever you like.

#board {
  height: 30em;
  border: solid black 2px;
  border-radius: 5px;
  background-color: #2ECC71;
}

.note {
  font-family: "Roboto", cursive;
  font-size: 0.85em;
  border: solid #93a500 1px;
  color: #656D77;
  border-radius: 0.35em;
  height: 1.5in;
  width: 2.4in;
  position: absolute;
  background-color: #f5ffa5;
  padding: 1em;
  box-shadow: 0.05em 0.05em 0.1em black;
}

.note.raised { box-shadow: 0.2em 0.2em 0.5em black; }

---

This awesome jQuery plugin is developed by borkabrak. For more Advanced Usages, please check the demo page or visit the official website.