HTML5 Tutorial Building a StickyNotes App – Part II

In this html5 tutorial, we will go a step farther from where we left. Yesterday, I showed you how to use HTML5 Web Storage API in my first html5 tutorial post. Today, I want, as promised, to embark on the next phase of the application. I hope you will enjoy this as much as I do. Before I jump in, let me do a recap really fast:

sticky note using html5 web storage 300x225  HTML5 Tutorial Building a StickyNotes App   Part II

So, here is what we covered in my first post:

  • localStorage has setItem, getItem, length and key() features that come with it among other things.
  • localStorage converts integers and floats into strings before storing and we have to convert them back to their original types before modifying them.
  • Every browser provides at least 5MB per domain.
  • localStorage can be used as an associative array meaning you can add and retrieve key/value pairs of data as you do in associative arrays.

Back to our awesome sticky notes html5 tutorial

Basic requirements of the web application:

  • A simple input area to add more sticky notes
  • An input of type button to click
  • Some css to style up this baby
  • The javascript file that performs the magic

The index.html


<!DOCTYPE html>

<html>

     <head>

         <meta charset="utf-8">

         <title>HTML5 tutorial- Next Generation of Sticky Notes</title>

         <script src="main.js"></script>

         <link rel="stylesheet" href="styles.css" />

      </head>

      <body>

         <form>

            <input type="text" id="sticky_content" />

            <input type="button" id="add_sticky" value="Add A New Sticky Note" />

        </form>

        <ul id="stickies">

        </ul>

     </body>

</html>

Now let us take care of the main.js


//like in my previous post, I will set the value of window.onload

//equals to init and then define it separately

window.onload = init;

function init(){

      for (var i=0; i < localStorage.length; i++){

      var key = localStorage.key(i);

      if (key.substring(0, 6) === 'sticky'){ //will explain this

           var value = localStorage.getItem(key);

           addStickiesToPage(value); //we will create this one

      }

   }

}

Explanation so far:

First, the html is simple enough. Just an input for text and another one for button – both inside a form.

Now the javaScript : continuing the first post, we already have some sticky notes in the localStorage and now we are getting them and adding them to the DOM. We use the key() method and then check to make sure that they are stickies. There is something I didn’t explicitly tell you; when creating your own sticky notes using Html5 web storage api, it is good to name them in a way that it will not collide with other possible items in the localStorage.

That being said, our sticky notes will be named following this simple convention – sticky_0, sticky_1, sticky_3 etc.

The second part of the script

main.js – defining the addStickiesToPage function.


//

//this function will insert the sticky notes to the DOM

//inside the <ul> element we created in the index.html file

function addStickiesToPage(value){

      var stickies = document.getElementById("stickies");

      var sticky = document.createElement("li");

      var span = document.createElement("span");

      span.setAttribute("class", "sticky");

      span.innerHTML = value;

      sticky.appendChild(span);

      stickies.appendChild(sticky);

}


The code above will display whatever is inside localStorage . We can make even better by making use of the form in our index.html file. We will be adding to the init function by handling a click event. Let us take a look here.


//inside our init function,

function init(){

    var button = document.getElementById("add_sticky");

    button.onclick = makeSticky; //we have to define this function

    //continue the init function here as shown above by adding

    //the for loop to get items from localStorage

}

Define the makeSticky function


function makeSticky(){

     var value = document.getElementById("note_content").value;

     var key = "sticky_" + localStorage.length;

     localStorage.setItem(key, value);

     addStickiesToPage(value);

}

Let us see some sticky notes now!

stickies demo html5 300x262  HTML5 Tutorial Building a StickyNotes App   Part II

Once again, I am realizing that this post is getting longer as I type. I am going to stop here and then continue the next part tomorrow. You are probably thinking; what is left? We already have stickies…but there are several issues coming up and I would like you to take a moment to think about it. Do you think our naming convention for the stickies is good enough?

What if we want to delete the sticky notes after they are not needed anymore? We will be adding all those as we improve our app. Every browser comes with tools that you can use to see behind the scenes of localStorage and even delete them from there.

Html5 tutorial summary:

Our web application is working by doing the following things:

  • Allows you to type some content and add sticky notes to the DOM
  • It checks to make sure we are retrieving the right items
  • We now create stickies on the fly by clicking a button.
  • We have used css to make the whole thing beautiful.

I will see you in the third post as we add more fun stuff.

If you have any questions, or want to add some ideas, please leave some comments below. Please also share this post with your friends online if you liked it. Thank you so much for stopping by and I hope you had fun.

See you tomorrow!

 

 

 

7 thoughts on “HTML5 Tutorial Building a StickyNotes App – Part II

  1. Hello I have added key.substring(0,6) command but the console in google chrome tells me the following error:
    Uncaught TypeError: Cannot call method ‘substring’ of null

    thanks

          • I have removed them, but I obtain the same mistake in my console:
            Uncaught TypeError: Cannot read property ‘substring’ of null

            do you want me to copy my code piece?

          • for(var i=0; localStorage.length; i++) {

            var key = localStorage.key(i);

            if (key.substring(0,6)=== “postit_”){

            var texto_de_la_nota = localStorage.getItem(key);

            }
            addStickyToDOM(texto_de_la_nota);

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">