To-Do List

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<iframe width="100%" height="300" src="//jsfiddle.net/RWhitbeck/ZyYFG/embedded/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

CSS

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 62.5%; /* Causes base font size to be ~10px */
}

/* Site wide styles */
label {
    width: 75px;
    font-weight: bold;
    display:block;
    float: left;
    line-height: 1.8em;
    text-align: right;
}
input[type=text], input[type=password], textarea {
    width: 175px;
    margin-left: 5px;
}

/* Login Page Styles */
#login #content {
    width: 344px;
    margin: 20px auto;
}
#login section {
    font-size: 1.4em;
    width: 300px;
    background-color: #ccc;
    position: relative;
    z-index: 1003;
}
#login section p {
    padding-bottom: 20px;
}
#login p.ui-state-error {
    padding: 5px;
    display: none;
}
#login header, #login section div.ui-widget-content {
    padding: 12px;
}
#login section form div {
    padding: 8px 0px;
}
#login #btnLogin {
    margin-left: 80px;
}
#login .ui-widget-overlay {
    z-index: 1002;
}

/* todo styles */
#todo #content {
    width: 400px;
    margin: auto;
    text-align: right;
}
#todo section {
    text-align: left;
}
#todo #AddProject {
    margin: 10px 0px;
}
#todo .AddToDo {
    margin-top: 10px;
}
#todo #AddProjectItem, #todo #AddToDoItem {
    display: none;
}

#todo #AddProjectItem p, #todo #AddToDoItem p {
    margin-top: 5px;
    margin-bottom: 10px;
}
#todo #AddToDoItem div {
    padding: 8px 0px;
}
#todo #tabs li .ui-icon-close { 
    float: left; 
    margin: 0.4em 0.2em 0 0; 
    cursor: pointer; 
}

JavaScript

// Setup our tabs and cache the jQuery Object to be reused.
var $tabs = $("#tabs").tabs({

    // tabTemplate: HTML template from which a new tab is created and added. 
    //                            The placeholders #{href} and #{label} are replaced with the
    //                            url and tab label that are passed as arguments to 
    //                            the add method.
    tabTemplate: "<li><a href='#{href}'>#{label}</a>\
                                 <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",

    // add (event): This event is triggered when a tab is added.
    add: function(event, ui) {

        // Setup a tab based on a jQuery Template defined in the HTML.            
        $("#newProjectTabTemplate").tmpl()

        // append the template results to the selected contents.
        .appendTo(ui.panel)

        // We need to recreate our To Do list accordions to setup the new 
        // accordion that was created with the new project tab.
        .setupToDoList();
    }
});

// Setup a click event to remove a tab from the tab bar.
$("#tabs span.ui-icon-close").live("click", function() {

    // Remove (method): Remove a tab. The second argument is the zero-based 
    //                                    index of the tab to be removed.
    $tabs.tabs('remove', $(this).closest('li').index());
});

// Setup a dialog widget and cache the results so we can call it easily.
// This will ask the user for the name of the project.
var addProjectItem = $("#AddProjectItem").dialog({

    // modal: If set to true, the dialog will have modal behavior; other items
    //        on the page will be disabled (i.e. cannot be interacted with). Modal 
    //        dialogs create an overlay below the dialog but above 
    //        other page elements.
    modal: true,

    // autoOpen: When autoOpen is true the dialog will open automatically when 
    //                     dialog is called. If false it will stay hidden until 
   ...