The Minimalist todo list

After the launch of The Minimalist todo list, I got a lot of compliments about it. They are loving it. I think reason is simple "Its simplest" and focused to its aim.


Idea
I believe that simpler is better. As we are growing in technology we are making things more complex, no longer is everything text-based, everything is graphical. As the result pages are slower to load, and information that could be presented simply and quickly is now making us wait minutes.

About todo lists, i have one question - Why you use them? For better time and task management?. But they waste your time, you have to register, login and wait the heavy pages to load(Everyone haven't Broadband).
Or do you need to edit OR mail them? NO!, you need to finish them!.


The Minimalist todo list
The Minimalist todo list is a simplest todo list over web, No need to register, login or waiting to load pages. Its a one page application that uses CSS and Jquery. Really Its not the HTML5 application.Its small too(~4kb). But it keeps your list saved(Try add item and reopen). To know how look into the code.
I am not using HTML5 local storage, because i am not yet habitual of that alerts asking for permission to store the data at local. 

How it works?

To add an task, Type the task and hit enter. And when you finish that, Hover any todo item and click the "item". Its saves your tast list in browser cookies, so closing the browser cant clear it, you have to do it yourself.

Code

Here is the code, download, add or remove some features and relaunch it.

HTML

<input type="text" value="" id="additem">
<ol class="" id="todolist" ></ol>
 

CSS

 #additem{

  font-size:30px;width:80%;
  border:1px solid #ddd;

  text-align:center;
  border-radius:5px;-moz-border-radius:5px;

  font-family:Arial, Helvetica, sans-serif;

  margin:5px auto 20px;

  padding:5px

 }
ol{list-style:none;padding:0}
#todolist li{ 

   line-height:32px; 

   color:#ddd; 

   position:relative; 

   font-size:40px;cursor:default;
   text-align:center
}

.done{

 font-size:40%;

 position:absolute;

 top:50%;
 left:50%;

 width:16px;

 height:16px;

 text-decoration:none;

 outline:none;

 margin:-8px 0 0 -8px 

}
 

JavaScript

$(function(){

//update the list initially

$('#todolist').html(getCookie('todo'));

$('#additem').keyup(function(e) {
    if(e.keyCode == 13) {    

        var newitem = $(this).val();
        if(newitem !=''){
            //generating random color

            var color 

           = Math.round(0xffffff * Math.random()).toString(16);

            //add it

            $('#todolist')

            .append('<li class="item" 

                 style="color:'+color+';">'+newitem+'</li>');           

            //save the list to cookies
            setCookie('todo',$('#todolist').html(),365);
           //Clear the box     

            $(this).val('');
        }        

    }
});
 
// show the "X"

 $('.item').live('hover', function(event) {

    if (event.type == 'mouseover') {

        $(this).append('<a class="done" href="#">X</a>');

    } else {

        $(this).find('a').remove();
    }

});

//Remove item

 $('.done').live('click',function(){ 

   $(this).parent().slideUp().remove();

    setCookie('todo',$('#todolist').html(),365);

    return false;

});

});
 

DEMO

The application is here.