Simple Note Taking App with jQuery and Local Storage - takenotes

File Size: 5.84 KB
Views Total: 3712
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></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.