Jayd Saucedo

Blog

TODO
Sometime during the last semester I decided that I needed a better way to organize the things that I needed to do. I was a bit overwhelmed with all the things that I had to do and the super simplistic TODO list application that I use through the Google homepage just wasn't cutting it. So I decided to develop my own TODO program, instead of, you know, doing the things that actually needed to be done. It was a good distraction either way.

Play with the TODO list here

My criteria was that it needed to self order in the traditional self, from low priority to high priority. That wasn't anything new, any TODO list program should do that. Something else I wanted was categories of TODO lists all contained in one list. So even though I had School, work, and bills to worry about I could contain them all on one list in their own respective categories while still comparing them based on their TODO priority. Due to the complication of having multiple branches in my list I also thought it would be useful to drag and drop tasks into their respective categories. So there was another feature that I needed to add. I ended up using the jquery library Nested Sortable in order to achieve this.

Allowing the dynamic creation of parents and tasks was just a matter of some jquery magic. Here's my "parentPriority" function from my javascript in which I update a category's priority text and color by detecting what the highest child priority is:

	parentPriority = function(){
		// go through all tasks in the list
		$('.ui-nestedSortable-no-nesting').each(function(index, element){
			itemPriority = Number($(element).contents('div').contents('span:first').attr('priority'));
			itemName = $(element).contents('div').contents('span').eq(1).html();
			
			additionalParents = Array();
			// go through all parents for this task
			$(element).parents('li').each(function(i, e){
				parentPrioritySpan = $(e).contents('div').contents('span:first');
				parentPriorityNum = Number($(parentPrioritySpan).attr('priority'));
				parentName = $(e).contents('div').contents('span').eq(1).html();
				parentsTxt = '';
				for(n=(additionalParents.length-1); n >= 0; n--){parentsTxt += ' =>  '+additionalParents[n];}
				if(itemPriority >= parentPriorityNum){
					$(parentPrioritySpan).attr('priority', itemPriority);
					$(parentPrioritySpan).html(priorities[Number(itemPriority)-1]+' - ');
					priorityColor($(e).contents('div'), itemPriority);
					$(e).contents('div').contents('span').eq(2).html(parentsTxt+' - '+itemName);
				}
				additionalParents.push(parentName);
			});		
		});
	}
Precedence is of most importance when working with the DOM in this fashion. I needed to create one element before I could embed it in another and so on. AJAX is used to seamlessly update the database with the user's changes. The page itself updates entirely through Javascript using JQuery. This makes it so users never know that their changes are being saved because the page is never reupdated from the server, the server is only updated from the page.

It's probably been over a month since I last worked on this. I got it to a working and presentable stage though. So I will probably use it for this coming semester. I have been reading other ideas of how to manage your time and organize your tasks and I'm starting to think that this program might be too simplistic for methods of organization that truly represent efficient task management.