Skip to main content
edited tags
Link
Quill
  • 11.9k
  • 5
  • 40
  • 93
added 1 character in body
Source Link
Jamal
  • 34.9k
  • 13
  • 133
  • 237

I am working on an HTML5/jQuery todo list app and herehere 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 Is it OK if I declare these functions inside the object literal and then call it using the object? IMOIn my opinion, the code would look consistent to the other programmers.

JS:

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.

JS:

I am working on an HTML5/jQuery todo list app and here is my code so far.

As you might notice, there are some functions called at the beginning of the JS code. These functions work perfectly right now. Is it OK if I declare these functions inside the object literal and then call it using the object? In my opinion, the code would look consistent to the other programmers.

Source Link
Rahul Desai
  • 819
  • 2
  • 10
  • 15

Should I declare all of the outer functions inside the object literal?

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');
}