Simple To Do List XXX

by velo_ninja

HTML

<p>Initially only your chosen next tasks are visible. To pick a next task click on the gray star. To stop a task from being marked as next, click on the orange star.</p>
<p>You can click on the "+" buttons to view all your tasks by context or by project. You can also view all your completed tasks.</p>
<p>To complete a task, simply click on the checkbox.</p>
<ul id="main">
    <li>
        <h3>Next tasks:</h3> 
        <ul id="nextList"> 
        </ul>  
    </li>
    <li>
        <h3>Tasks by Context: <input class="nu" type="button" value=" + "/></h3> 
        <ul id="contextList"> 
        </ul>  
    </li>
    <li>
        <h3>Tasks by Project: <input class="nu" type="button" value=" + "/></h3> 
        <ul id="projectList"> 
        </ul> 
    </li>
    <li>        
        <h3>Add Task: <input type="button" value=" + " class = "nu"/></h3> 
        <ul><li>
        <table id="toAdd"> 
            <tr> 
                <th>Action</th><th>Project</th><th>Area of Focus</th><th>Goal</th><th>Vision</th><th>Purpose</th><th>Context</th><th>Date Added</th><th>Priority</th><th>Time Planned</th> 
            </tr>    
            <tr> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
                <td><input type="text" /></td> 
            </tr> 
            <tr> 
                <td colspan="10"><input type="button" value="Add Task" id="addTask" /></td> 
            </tr> 
        </table>
        </li></ul>
    </li>
    <li>
        <h3>Done Tasks: <input type="button" value=" + " class = "nu"/></h3>
        <ul id="doneList">
        </ul>
    <li>
    <li>            
        <hr/>
    ...

CSS

@charset "utf-8";
/* CSS Document */ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}    
h3, br {
    clear: both; }
table {
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
}
p {
    width:24em;
    margin:1em; }
.wide {
    width:95%; }
fieldset,img { 
    border:0;
}
.done {    
    float:right; }
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
#main > li {
    margin:1em;
    overflow:auto; }
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

body {padding: 10px;  }  
  
    body {
    background-color: #9FC6D3;}
h3, th {
    font-weight: bold; }
table {
    border: 3px solid #000;
    background-color:#FFF; }
td, th {
    padding: 6px;
    border: 1px solid #000; }
ul {
    width:20em;
    margin: 0 0 1em 1em; }
#main, #contextList, #projectList {
    width:100%; }   
#contextList > li, #projectList > li, #nextList {
    width:22em;
    float:left;     
    -moz-border-radius: 16px; 
    -webkit-border-radius: 16px;
    border:1px solid #A2A2A2;     
    margin:0.5em; 
    padding:0.5em;
    cursor:move; 
    background-color:#000;
    color:#FFF;
    }   
li.task {                    
    background-color:#BBBBBB;                    
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px;
    border:1px solid #A2A2A2;     
    margin-bottom:1em;
    margin-top:0.25em;
    cursor:pointer;
    
    padding:0.4em 0.4em 0.3em 0.4em;
    margin:0.5em;    
    color:#000000;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#BBBBBB'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#BBBBBB)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFFFFF, ...

JavaScript

//<![CDATA[ 
    // Action list
    // Namespace with most methods
    $.pa = {
        todoArr     : [],
        addTask     : function() {
            var i, ii;                    
            numTasks = $.pa.todoArr.length;                                
            $.pa.todoArr[numTasks] = [];         
            $.pa.todoArr[numTasks][0] = 0;
            $("input:text", "#toAdd").each(function(index) {               
                $.pa.todoArr[numTasks][index + 1] = this.value;   
            });  
            $.pa.todoArr[numTasks][11] = $.pa.todoArr[numTasks][10];
            // priority
            $.pa.todoArr[numTasks][10] = $.pa.todoArr[numTasks][9];
            // date added
            $.pa.todoArr[numTasks][9]  = "";
            // time taken
            $.pa.todoArr[numTasks][12] = "";                
            $.pa.todoArr[numTasks][13] = "";                
            $.pa.todoArr[numTasks][14] = $.pa.todoArr.length - 1;

            if ($.pa.todoArr[numTasks][8] == "")
                $.pa.todoArr[numTasks][8] = $.pa.currentDate();
            
            $.pa.updatePage();
        },           
        clearAll    : function() {
            // Clear everything except CSV list
            // Clear table
            $("#actionList").find("tr:gt(0)").remove();
            // Clear contexts
            $("#contextList").empty();            
            $("#projectList").empty(); 
            $("#doneList").empty();
            $("#nextList").empty();
        },
        contextList : function() {
            // Populate context list
            $.pa.genericList(7, "@", "contextList");

            // Toggle contexts         
            $("#contextList input").click(function() {
                $(this).next("ul").toggle();
                $(this).val() == " - " ?
                    $(this).val(" + ") :
                    $(this).val(" - ");                
            });                
            $("#contextList ul").sortable();
      ...