
Untitled
By: a guest on
May 26th, 2012 | syntax:
None | size: 0.86 KB | hits: 9 | expires: Never
// 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 task = $input.val();
var $item = $('<li class="incomplete">' + task + '</li>');
$item.click(toggleTask);
$list.append($item);
$input.val('');
});
function toggleTask() {
$(this).hasClass('incomplete') ? $(this).attr('class', 'complete')
: $(this).attr('class', 'incomplete')
}