Sticky Notes Demo: What About Writing Your Own Notes?

In my previous post, Sticky Notes: An Html5 Drag and Drop Demo, I presented a small sample of how native drag and drop functionality could be implemented using the latest Html5 Drag and Drop API (Application Programming Interface). The app simply allows visitors to move sticky notes about a white board and drop them in a basket. As each note is dropped in the basket a message box pops up displaying a message appropriate to the note being dropped. Going through my demo I had an idea: what if the visitor could write a fresh note and stick it on the white board? Here is a simple way of doing just that.

What Can the New Feature Do?

The newly added functionality allows the visitor to write her own note in a textarea element. The maximum amount of characters a note can contain is 20, otherwise the text would overflow the available space. As the user writes the note a message appears indicating how many characters are left for her to use. If she exceeds that number the cursor is prevented from typing any more characters into the textarea.

By clicking the Stick your note button, the note gets stuck to the white board. From that point on, the note behaves like all the other notes on the board: it can be moved about the board and be thrown in the waste paper basket.

The only thing missing is the message popping up as the note gets dropped in the basket, although the opportunity of letting the user add this message as she creates the note could be implemented in a future update of the demo.

How Does the New Feature Work?

There are 2 pieces of functionality to deal with. The first one relates to enforcing the 20 character maximum length policy on the text of the fresh note. The second piece of code deals with the note being created and stuck to the board. Let's talk about each of them in turn.

The textarea element and the 20 character maximum length policy

The textarea lacks a maximumlength property, that is it doesn't offer the native functionality of limiting the number of characters that it can contain. Because it's not necessary to reinvent the wheel, and there are great developers around who generously make their work available to the community, I took advantage of a clever jQuery plugin developed by Jan Jarfalk called limit. It's lightweight, extremely easy to implement, and a must-have in situations where users are invited to add messages, comments, and such like, and only a limited number of characters are allowed. Here's how easy it is to implement. After downloading the plugin file from its website, add the reference to its file under your jQuery library reference in the head section of your html page:

<script src="../jquery.js"></script>
<script src="../jquery.limit-1.2.source.js"></script>
</head>

In your mark-up you need a span element with an id of "charsLeft", a textarea element, and a script tag set up like so:

<p>You have <span id="charsLeft"></span> chars left</p>
<a href="#" class="BtnWriteNote">Stick your note</a>
<textarea id="notePad" class="NotePad" rows="5" cols="10"></textarea>
<script type="text/javascript">
//Initialize the limit plugin to check n of chars
$('#notePad').limit('20', '#charsLeft');
</script>

That's all you need!

Create the note and stick it to the board

The main piece of code for the creation of the note takes place at the click of the Stick your note button, therefore I attached an event handler to the click event, like so:

//Create a new note on button click
$('.BtnWriteNote').click(function(e) {
//Set up unique note id with random number
var noteId = Math.floor(Math.random() * 11);
//Retrieve note text
var noteText = $('#notePad').val();
//Build html for the new note
var newNote = '<div id="newNote' + noteId + '"
 draggable = "true" class="Note">' + noteText
+ '</div>';
//Append new note to bottom section of the board
$('#bottomSection').append(newNote);
//Clear notepad as note is stuck to the board
$('#notePad').val('');
//Reset focus on textarea
$('#notePad').focus();
e.preventDefault();
});
});
</script>

One more thing to point out relates to working out how to alert the drag and drop code to the arrival of new html mark-up in the DOM (Document Object Model), i.e., the new note, so that it can be manipulated like all the other hard-coded notes. All it takes is to use the jQuery on() method (new to jQuery 1.7) rather than the bind() method to attach the dragstart event to the html element:

$('#topSection div, #centerSection div,
#bottomSection div').
on('dragstart', function(event)
...

Summary

Making fun additions to an existing application, or a small demo like this one, becomes a breeze with jQuery and its great plugins. Feel free to have a close look at the entire code in the demo page of the application by clicking the View Source button in the context menu of one of the latest browsers (I tested the demo with the latest versions of Firefox and Chrome, IE8 is not ideal but gets things done eventually. However, I found that the Html5 drag and drop functionality fails in Safari 5.1).