I am working on an HTML5/jQuery todo list app and here is my code so far: http://jsfiddle.net/rdesai/csTS7/19/
As you might notice, there are some functions called at the beginning of the JS code. These functions work perfectly right now. My question is - Is it OK if I declare these functions inside the object literal and then call it using the object? IMO the code would look consistent to the other programmers.
What is the ideal way of doing this?
jsFiddle
JS:
$(function(){
// check if browser supports localStorage, if not, notify and exit
checkLocalStorageBrowserSupport();
//check localStorage for existing data
checkLocalStorageExistingData();
tweakMinorUIStuff();
// object literal todo_item
var todo_item = {
content: "", // default content
starred: false, // default star value
addItem: function(){
// collect new item data
todo_item.content = $("#new_todo_item").val();
todo_item.starred = $("#star").prop('checked');
addItem(todo_item);
},
toggleStar: function(){
// update localStorage
// update UI
alert("working!");
},
editItem: function(){
// toggle textarea
// update localStorage
// update UI
}
}
$("#add").click(function(){ todo_item.addItem(); });
$(".star").click(function(){ todo_item.toggleStar(); });
})
function checkLocalStorageBrowserSupport(){
if(!window.localStorage) {
// notify user
$("#info").text("Your browser does not support the HTML5 feature 'localStorage'. Please use an updated browser for this application to work.");
// stop
return false;
} else
return true;
}
function checkLocalStorageExistingData(){
if(localStorage.getItem('todo_items')){
var todo_items_json = localStorage.getItem('todo_items');
var todo_items = todo_items_json ? JSON.parse(todo_items_json) : [];
todo_items.forEach(function(item){
var item_content = item[0];
var star_check = item[1];
var checked = "";
if(star_check) checked = "checked";
$("ul").append("<li><button class='done'>Done</button>"+
"<p class='item_content'>"+item_content+"</p>"+
"<input type='checkbox' class='star' "+checked+" />"+
"<label>Star</label>");
});
}
}
function addItem(todo_item){
// fetch current items from localStorage
var todo_items_json = localStorage.getItem('todo_items');
var todo_items = todo_items_json ? JSON.parse(todo_items_json) : [];
// check for duplicate item
var duplicate = false;
$.each(todo_items,function(i,item){
//console.log(item[0]);
if(todo_item.content === item[0]){
duplicate = true;
//console.log("found!");
// cut the loop
return false;
}
});
// if new item is a duplicate of an existing item, do not add it
if(duplicate){
// highlight the original item
$( ".item_content:contains('"+todo_item.content+"')" ).parent().effect("highlight", {}, 10000);
// notify the user
$("#info").text("You already have '"+todo_item.content+"' in your list!");
// set focus on textbox again
$("#new_todo_item").focus();
return false;
}
// compose and add new todo item to localStorage
var new_todo_item = [todo_item.content,todo_item.starred];
todo_items.push(new_todo_item);
localStorage.setItem('todo_items', JSON.stringify(todo_items));
// update UI with new todo item
var checked = "";
if(todo_item.starred) checked = "checked";
$("ul").append("<li><button class='done'>Done</button>"+
$("#new_todo_item").val()+
"<input type='checkbox' class='star' "+checked+" />"+
"<label for='star'>Star</label>");
// reset the content of textarea
$("#new_todo_item").val("");
// uncheck the add star checkbox
$("#star").prop('checked', false);
// set focus on textbox again
$("#new_todo_item").focus();
}
function tweakMinorUIStuff(){
// make teaxtarea height auto-increate
$('#new_todo_item').elastic();
// set focus on textbox
$("#new_todo_item").focus();
$("#new_todo_item").on("input propertychange paste", function(){
if($("#new_todo_item").val().length != 0)
$("#add").removeAttr('disabled');
else
$("#add").attr('disabled','disabled');
});
$("#undo, #redo").attr('disabled','disabled');
}