12
May
In the last post we completed a fully functional html5 web app using localStorage to store the data. So what else is there? First I think we should drop those ugly javascript alert()’s and use something that looks like it belongs in a web app, like the jQuery UI dialog()’s. Since we are allowing users to input a date, why not make it easier and add a datapicker so we don’t have to worry about what format they use. While we are at it lets style this app with some fancy new CSS3 that’s all the rave with the cool kids. Our aim for the style is an iPhone(ish) web app. First lets get into jQuery UI and adding our dialog’s and datepicker. You will need to include jqueryui as well as the theme (any theme will work, we will be using the smoothness theme that comes with the bundle).
Adding a dialog to the delete anchors on each item may seem pretty easy but I found that it took a little more work then I expected to make it work correctly. I ended up creating a deleteItem() function that looks like this.
(more…)
11
May
You should now have a good idea of how you can use localStorage yourself. However I promised we would create a simple html5 web app and thats what we are going to do. In this post we are going to get our app setup and ready for use. This means it will allow a user to create new entries in their database, display all the entries and allow them to delete a specific entry or remove all entries. In this post we won’t focus on the design of the app but rather making it functional. Part Four will cover the final steps including the design and adding some fancy css3. So, why am I still talking when you are here to see some code?
First we will take what we learned in the last post and write the function that will allow a user to create a new database entry. In this case, since we are creating a time tracking app, it means adding an item to the time log including project name, hours spent and the date. This means we are going to need a pretty simple form along with some code to run on submit that will store the item in the database. I will be using some jQuery for this code.
(more…)
10
May
In part one you got some information on what localStorage was and what browsers supported it. You also saw how easy it was to save an item, get the item from the database and then remove it. I know your still trying to figure out what can you actually do with this localStorage and your about to find out. Again remember that my love for jQuery has not faded so you will see some jQuery through out the code and as I said before feel free to use good ol’ javascript instead of jQuery if you feel the urge.
For this Time Tracking web app we are going to allow you to input a project name, hours spent working on that project and the date. Now these three values will need to be stored together with the same key and following the simple method used in Part One won’t work. However this is a lot easier then you might think. You will create a new array and store those three values. Then with a .join() when saving the item it will give you those three values stored in the database under whatever key you want. In our case we are going to keep it simple and make key an id. First lets get our values ready. Since the key will be a unique id we will grab the current date and get the number of milliseconds since January 1, 1970. This will give us a unique id for each item in the database.
(more…)
