Simple ToDo List

by rdillman

HTML

<div id="tasks"></div>
<div class="picked">
    <div id="users_picked"></div>
    <div id="tasks_picked"></div>
</div>

CSS

html, body {
    background-color: #999;
    color: #666;
    font-family: arial, helvetica, sans-serif;
}
#tasks, .picked {
    background-color: #222;
    border-radius: 5px;
    box-shadow: 4px 4px 4px #555;
    margin: 10px auto 0;
    padding: 10px;
    width: 300px;
}
.normal {
    background-color: #e5e5e5;
    color:#666;
    padding: 3px;
}
.urgent {
    background-color: #ffff00;
    color:#333;
    padding: 3px;
}
.very_urgent {
    background-color: #ff0000;
    color:#fff;
    font-weight:bold;
    padding: 3px;
}
.wrapper {
    margin: 0 auto;
    padding: 10px 0 0;
    width: 100px;
}
.list {
    color: #999;
    cursor: pointer;
    margin: -18px 0 0 380px;
    position: absolute;
    width: 50px;
    z-index: 15;
}
.time {
    color: #999;
    font-size: 13px;
}
#tasks div, #tasks input {
    cursor:pointer;
}
#tb_wrapper {
    background-color: #222;
    border-radius: 5px;
    box-shadow: 4px 4px 4px #555;
    margin: 10px auto 0;
    padding: 10px;
    width: 400px;
}
#tb {
    width: 400px;
}

JavaScript

var tasks = {};

function getId(id) {
    var cc = id;
    var dd = '#d' + cc;
    var ee = '#r' + cc;
    var ff = '#c' + cc;
    $(dd).fadeIn('slow');
    $(ff).prop("checked", false);
    $(ee).fadeOut('slow');
}

$(document).ready(function () {
    var users = '{"1":"Ed","2":"Jay","4":"Bart"}',
        status = '{"1":"Normal","2":"Urgent","5":"Very Urgent"}',
        tasks = '{"1":{"user_id":1,"status_id":1,"task":"Walk the dog","date_completed":null},"2":{"user_id":1,"status_id":1,"task":"Feed the cat","date_completed":null},"3":{"user_id":1,"status_id":2,"task":"Lock the house","date_completed":null},"4":{"user_id":1,"status_id":5,"task":"Put out the fire","date_completed":null},"5":{"user_id":2,"status_id":1,"task":"Feed the fish","date_completed":null},"6":{"user_id":2,"status_id":1,"task":"Pay your bills","date_completed":null},"7":{"user_id":2,"status_id":2,"task":"Charge your phone","date_completed":null},"8":{"user_id":2,"status_id":5,"task":"Drive with eyes open","date_completed":null},"9":{"user_id":4,"status_id":1,"task":"Sweep the porch","date_completed":null},"10":{"user_id":4,"status_id":1,"task":"Wash the car","date_completed":null},"11":{"user_id":4,"status_id":2,"task":"Put gas in car","date_completed":null},"12":{"user_id":4,"status_id":5,"task":"Avoid the pedestrian","date_completed":null}}',
        s_class = 'normal';

    tasks = jQuery.parseJSON(tasks);
    $.each(tasks, function (entryIndex, entry) {
        switch (this.status_id) {
            case 1:
                s_class = 'normal';
                break;
            case 2:
                s_class = 'urgent';
                break;
            case 5:
                s_class = 'very_urgent';
                break;
        }
        var tasks_ops = '<div id="d' + entryIndex + '" class="' + s_class + '"><input type="checkbox" id="c' + entryIndex + '" value="' + entryIndex + '" class="c_' + s_class + '"/> ' + this.task + '</div>';
        $('#tasks').append(tasks_ops);

    });

  ...