myChecklist: A simple application for chrome II

Now in this part I am going to talk about in a very high level manner how myChecklist (The application I mentioned in my previous post) is made using JavaScript and JQuery. Here are the basic ideas behind each functionality:

Adding new items to table: There is a basic JavaScript code snipped that adds columns to tables. You can Google it for more information but the basic syntax is something like this:

                var table = document.getElementById("myTable");

                var row = table.insertRow(-1);
  var cell0 = row.insertCell(0);
  cell0.innerHTML = task;

User interface: As you can see there are special dialog boxes, as well as a datepicker that I used in the application. They are all part of JQuery UI library that you can download form here and use.

Storing information in a database: I used localStorage functionality of JavaScript to store user information on hard-drive. localStorage is similar to cookies, but unlike cookies they are not get expired, nor can they be deleted by simply clearing cache, history, or cookies. They are basically stored in a JSON (JavaScript Object Notation which is a format to store JavaScript objects. It is similar to XML) formatted file somewhere on user`s computer and remain there forever unless damaged or deleted by the user.

Changing wallpaper: I used JavaScript id selector to change the background image to the image located in the URL you enter. This may not be a very good idea because some users are not even familiar with URIs/URLs. I may change it in later versions.

Click events: There are several click events. For example when you click on 'add' button a dialog window pops up. These events where made using JQuery powerful functions such as 'on'. Something like this:
$("#buttonId").on('click',  function(){
  //Add code here
});

Conclusions:
JQuery is very powerful when making client-sided web applications. Even using AJAX is much simpler using JQuery. It has many amazing features. You may want to have a look at them here in their documentation.