$(document).ready(function() {
$('#new-status form').submit(function(e) {
e.preventDefault();
var text = $('#new-status').find('textarea').val();
$.ajax({
url: '/echo/json/',
type: 'POST',
dataType: 'json',
data: { text: text, json: JSON.stringify({'text': text }) },
success: function(data) {
var $li = $('<li>');
var $input = $('<input>', {'type': 'checkbox'});
$li.append($input);
$li.append($('<label>', {'text': data.text, 'data-text': data.text}));
$input.change(function() {
$('h1 span').text($('#new-status input:not(:checked)').length);
var $label = $(this).parent().find('label');
$label.text($label.attr('data-text') + ($(this).is(":checked") ? " (Done!)" : ""));
}).trigger('change');
$('#statuses').append($li);
$('#new-status').find('textarea').val('');
}
});
});
});
<div id="new-status">
<h1>
Todo (<span>0</span> left)
</h1>
<form>
<textarea id="new-status"></textarea>
<button type="submit">Add</button>
</form>
<ul id="statuses"></ul>
</div>
External resources loaded into this fiddle: