jQuery To-do Application

For introduction to jQuery presentation

by Matt Swensen

HTML

<section class="content">
    <h1>My To-do Items</h1>
    <ul class="todo-list">
        <li><input type="checkbox" /> Summary for 404</li>
        <li><input type="checkbox" /> Create Sprint 1 Eclipse project</li>
    </ul>
    <input type="text" class="new-todo" placeholder="New To-do..." /><button class="add">Add</button>
    <button class="purge">Purge Completed</button>
</section>

SCSS

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,600,600italic);

.content {
    font-family:'Titillium Web', sans-serif;
    font-size: 16px;
    margin: 10px;
    padding: 10px;
    background-color: #f2fafc;
    border-radius: 2px;
    h1 {
        color: #20869e;
        font-size: 1.5em;
        font-weight: 600;
        padding-bottom: 5px;
        margin-bottom: 15px;
        border-bottom: 1px solid #20869e;
    }
    ul {
        margin-bottom: 15px;
        li {
            color: #0e3e49;
            &.done {
                text-decoration: line-through;
                color: #c3d0d1;
            }
        }
    }
    .new-todo {
        font-family:'Titillium Web', sans-serif;
        padding: 2px 3px;
        border: 1px solid #20869e;
        margin-right: -1px;
    }
    button {
        font-family:'Titillium Web', sans-serif;
        padding: 2px 5px;
        cursor: pointer;
        &.add {
            background-color: #20869e;
            border: 1px solid #20869e;
            color: #fff;
            margin-left: 0px;
        }
        &.purge {
            background-color: #304bad;
            border: 1px solid #304bad;
            color: #fff;
        }
    }
}

JavaScript

$('.add').on('click', function() {
    var todo = $('.new-todo').val();
    $('.todo-list').append('<li><input type="checkbox" /> ' + todo + '</li>');
    $('.new-todo').val('');
});

$('.todo-list').on('change', 'input', function() {
    if($(this).parent().hasClass('done')) {
        $(this).parent().removeClass('done');
    } else {
        $(this).parent().addClass('done');
    }
});

$('.purge').on('click', function() {
    $('.done').remove();
});