Todo app for iphone ipad using jquery mobile and web storage

    I recently added article about web storage and demonstrated how to use local storage and session storage. So i thought to go further and create a application based on html5 web storage so that me and you all can better understand how web storage works and how it can be coded.

     So here we are creating jquery mobile Iphone/Ipad application which is simple Todo app for iphone ipad using jquery mobile and web storage, where you can list your todo’s and once its completed you delete it from list. For this app i am using local storage so if you create a list and then come back after few days it will be there as it is, so you can use this app for your daily tasks management.

jquery mobile todo iphone ipad app todo app for iphone ipad using jquery  mobile and web storage

Index.php

<html>
	<head>
	<title>TODO App</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
	</script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
	</script>
	</head>
	<body onload="onBodyLoad()"> 
		
Clear

TODO

Add

<a href="http://www.amitpatil.me/?s=iphone+ipad" data-theme="b" data-icon="star">More iphone Apps</a> </div> </body> </html>

var i = localStorage.length;
function onBodyLoad(){
	var todo = "";
	
	create_new_list();
	
	$("#clear").click(function(){
		localStorage.clear();
		$("#todo_list li").fadeOut(function(){
			$(this).html("");
		});
	});

	$("#remove").live("click",function(e){
		var index = $(this).closest("li").attr("id");
		$(this).closest("li").slideUp(function(){
		
			// remove the selected item
			localStorage.removeItem('names_'+index);
			
			// rearrange localstorage array 
			for(i=0; i < localStorage.length; i++) {
			  if( !localStorage.getItem("names_"+i)) {
				localStorage.setItem("names_"+i, localStorage.getItem('names_' + (i+1) ) );
				localStorage.removeItem('names_'+ (i+1) );
			  }
			}
			
			// clear existing list UI
			$("#todo_list").html("");
			
			// create new list
			create_new_list();
		});
	});
}
function create_new_list(){
	for (var i = 0; i < localStorage.length; i++){
		todo = localStorage.getItem('names_'+i);
		$("#todo_list").append('
  • '+todo+'Remove
  • '); } // Refresh list so jquery mobile can apply iphone look to the list $("#todo_list").listview(); $("#todo_list").listview("refresh"); } function save_todo(){ var todo = $("#textinput1").val(); if(todo.length){ // store item in local storage localStorage['names_'+i] = todo; // Update todo list $("#todo_list").append('
  • '+todo+'Remove
  • '); // Refresh list so jquery mobile can apply iphone look to the list $("#todo_list").listview(); $("#todo_list").listview("refresh"); i++; } }

    add_todo.html

    <html> 
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    	<link rel="stylesheet"  href="themes/default/" />  
    	</head> 
    <body> 
    	

    Add TODO

    Submit Cancel
    </body> </html>

     

    About Amit

       Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

    Comments

    1. Hi Amit. I noticed that when a note is a little long, you can’t see the rest of the text when viewed on small devices or when your browser is minimized. It shows … and when you click on it nothing happens.
      Is there any way to have it so when someone clicks on the message, it shows the rest of the message?

      • Kev, If you like to implement that functionality, open index.html file and make below changes to it, it will solve your problem.
        1) Locate the line which says // update todo list
        and replace the $("#todo_list").append('<li id="'+i+'"><a href="#" rel="nofollow">'+todo+'</a><a href="#" data-rel="dialog" data-
        transition="slideup" id="remove">Remove</a></li>');
        with $("#todo_list").append('<li id="'+i+'"><a href="#" rel="nofollow"><span style="white-space:normal;">'+todo+'</span></a><a href="#" data-rel="dialog" data-transition="slideup" id="remove" rel="nofollow">Remove</a></li>');

        Notice the change <span style="white-space:normal;">'+todo+'</span>

        2) Locate function create_new_list() in the same code and apply the same change, wrap '+todo+' with "<span style="white-space:normal;">+'todo'+</span>

        Or simply view source of the demo page and overwrite it with existing code in index.html page. Let me know if you have any problem with it.

      • Thank you for this example, it is really awesome.
        Is it possible to click on the item in the list and go to a seperate form and save additional information in that form?

        Thanks!
        Chris

      • hi amit. when you press ‘enter’, it doesn’t takes you back to the index page. it just refreshes and the dialog box where you enter your task comes up again. is there any way you can just press enter and not have to click submit everytime? thanks!

        • Yes it can be done, On keypress event check if keycode is 13 then call save_todo() function and return false; so form will not submit and todo will get saved.

    2. Thanks for the quick response Amit. It worked perfectly, beautiful job.

      I have one more question for you. I noticed a link for docs-dialogs.html in the add_todo.html. I don’t have a page like that. Do I need it?

      Save

    3. Hello Amit…i would really like to know more about Html 5

      Please you can Pm me on kersyduru at gmail

    4. Hello Amit,
      I’m trying this out in Eclipse for an android app, but the clear and remove click functions won’t work. I’ve tried using the same versions of jquery and jquery mobile that you’re using, but still nothing. I’ve moved the js around: top, bottom, in the doc ready, but nothing again. Any ideas would be appreciated. Everything but clear and remove works. Thanks.

      • Are you trying o creae a app using Phonegap (cordova) ? As per my knowledge i believe that local storage is supported in android browsers so it should work. May be you would like to check is its really supported using below code

        if(typeof(Storage)!=="undefined")
        {
        // Yes! localStorage and sessionStorage support!
        }
        else
        {
        // Sorry! No web storage support..
        }

    5. Thanks for this, it is awesome.

      Is it possible to click on an item in the list and go to a form to save additional information?

      Thanks!!
      Chris

    6. jeanettebaumgartner@gmail.com' commercial pest control equipment says:

      Hey there! I just wanted to ask if you ever have any problems with hackers?
      My last blog (wordpress) was hacked and I ended up losing many months
      of hard work due to no backup. Do you have any methods to protect against hackers?

      • Its better to backup your blog data always. There are backup plugins too. Install one and be happy

    7. Hello :). Just wanted to ask, where can I locate the saved todo list? And is ‘localStorage’ a fixed variable in HTML? Thank you.

    8. I am new in using htmls and javascripts too, i could not put all of those codes together. can you please help me in putting them together and mail to ibrahimjrn@gmail.com

    9. How do you install this on IOS or do you have to package with some program? Can i just move the files to the ipad and click on the index.html file to get the website running?

      • I am not sure if it will work for you if you just copy them and run directly. But if you bundle those files with phonegap it will surely work.

    Speak Your Mind

    *


    *

    Notify me of followup comments via e-mail. You can also subscribe without commenting.

    More in CSS, html5, Ipad, Iphone, jQuery (8 of 40 articles)


    HTML5 web storage HTML5 has introduced feature, HTML5 web storage. HTML5 web storage allows us to store data on ...