ToDo List Exampe

by mcotton

HTML

<input type="text" id="text_item"><input type="button" id="add" value="add">

<ul id="items">
<li>First thing to do</li>
<li>Second thing to do</li>
<li>Yet one more thing to do</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>

<br>

<ul id="finished_items">
</ul>

<br>

<textarea id="display"></textarea>

CSS

li { margin:5px; cursor:pointer; }

li.hilite { background:yellow; }

.done { text-decoration: line-through;}

JavaScript

$("#items li").live({
    click: function () { 
        $(this).addClass("done");
        $(this).appendTo('#finished_items');
        $('#display').val(
            $('#items').html() + $('#finished_items').html());
    },
    
    mouseover: function() {
        $(this).addClass("hilite");
    },
    
    mouseout: function() {
        $(this).removeClass("hilite");
    }

});


$("li").live({
    mouseover: function() {
        $(this).addClass("hilite");
    },
    
    mouseout: function() {
        $(this).removeClass("hilite");
    }

});


$("#add").click(function()  {
    $('#items').append("<li>" + $('#text_item').val() + "</li>");
});