theabraham/gist:1315046

## gistfile1.txt
// index.html

<html>
    <head>
        <title>Todo List</title>
        <style>
            .complete { text-decoration:line-through; }
        </style>
    </head>

    <body>
        <ul></ul>
        <input type="text" x-webkit-speech />
        <button>Submit</button>
    </body>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="main.js"></script>
</html>

// main.js

var $list = $('ul');
var $input = $('input');
var $button = $('button');

$button.click(function() {
    var todo = $input.val();
    var $item = $('<li class="incomplete"></li>').html(todo);
    $item.click(toggleComplete);
    $list.append($item);
    $input.val('');
});

function toggleComplete() {
    var $todo = $(this);
    $todo.hasClass('incomplete') ? $todo.attr('class', 'complete')
                                 : $todo.attr('class', 'incomplete')
}
	// index.html

	<html>
	<head>
	<title>Todo List</title>
	<style>
	.complete { text-decoration:line-through; }
	</style>
	</head>

	<body>
	<ul></ul>
	<input type="text" x-webkit-speech />
	<button>Submit</button>
	</body>

	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="main.js"></script>
	</html>

	// main.js

	var $list = $('ul');
	var $input = $('input');
	var $button = $('button');

	$button.click(function() {
	var todo = $input.val();
	var $item = $('<li class="incomplete"></li>').html(todo);
	$item.click(toggleComplete);
	$list.append($item);
	$input.val('');
	});

	function toggleComplete() {
	var $todo = $(this);
	$todo.hasClass('incomplete') ? $todo.attr('class', 'complete')
	: $todo.attr('class', 'incomplete')
	}