schatekar/todo-1.js

## todo-1.js
$(document).ready(function () {

    // Returns formatted HTML for a todo item
    function getToDoHtml(todo) {
        return '<li><span class="todo">' + todo + '</span><a class="edit">Edit</a><a class="remove">Remove</a></li>';
    }

    // When Add button is clicked, appends the todo item from the textbox to the list of todo items
    $('input[type="submit"].add-todo').click(function () {
        var todo = $('input[type="text"].add-todo').val();

        if (todo !== null) {

            $('.todo-list').append(getToDoHtml(todo));
            $('input[type="text"].add-todo').val(null);
        }
    });

    // when edit link is clicked for a particular todo item, changes HTML so that todo item can be edited
    $('a.edit').live('click', function () {

        $(this).siblings('.remove').remove();
        var todoSpan = $(this).siblings('span');
        var todo = $(todoSpan).text();
        var edittodo = '<input class="editing" type="text" data-original-value="' + todo + '" value="' + todo + '" />';
        todoSpan.replaceWith(edittodo);

        var actions = '<a class="save">Save</a><a class="cancel">Cancel</a>';
        $(this).replaceWith(actions);
    });

    // While in edit mode, when save link is clicked, saves the changes
    $('a.save').live('click', function () {

        var todo = $(this).parent().children('.editing').val();

        if (todo !== null) {
            $(this).parent().replaceWith(getToDoHtml(todo));
        }
    });

    // While editing, when cancel link is clicked, goes back to todo item list
    $('a.cancel').live('click', function () {
        var todo = $(this).parent().children('.editing').attr('data-original-value');

        if (todo !== null) {
            $(this).parent().replaceWith(getToDoHtml(todo));
        }
    });

    // When clicked on remove link for a particular todo item, removes that item
    $('a.remove').live('click', function () {

        var confirmremove = confirm("Are you sure you want to remove this todo item?");

        if (confirmremove) {
            $(this).parent().remove();
        }

    });
});

## todo.html
<!DOCTYPE html>
<html>
<head>
    <title>Todo example</title>
   <style>
	input[type="submit"].add-todo {	margin-left: 20px;}
	span.add-todo {	font-size: 20px;}
	input[type="text"].add-todo, input[type="text"].editing  {font-size: 20px; margin-left: 40px;}
	ul.todo-list li {list-style: none;margin-left: 40px;}
	ul.todo-list li span{font-size: 20px;padding: 10px;}
	ul.todo-list li .edit{padding-left: 30px;font-size: 10px;color: red;}
	ul.todo-list li .remove{padding: 10px;font-size: 10px;color: red;}
	ul.todo-list li .save{	padding-left: 30px;font-size: 10px;color: green;}
	ul.todo-list li .cancel{padding: 10px;font-size: 10px;color: red;}
    </style>
    <script src="./jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="./todo-1.js"></script>
</head>
<body>
<div class="add-todo">
    <span class="add-todo">Add a new todo item</span>
    <input type="text" class="add-todo"/>
    <input class="add-todo" type="submit" value="Add"/>
</div>
<h2>Here is your list of todo...</h2>
<ul class="todo-list">
</ul>
</body>
</html>
	$(document).ready(function () {

	// Returns formatted HTML for a todo item
	function getToDoHtml(todo) {
	return '<li><span class="todo">' + todo + '</span><a class="edit">Edit</a><a class="remove">Remove</a></li>';
	}

	// When Add button is clicked, appends the todo item from the textbox to the list of todo items
	$('input[type="submit"].add-todo').click(function () {
	var todo = $('input[type="text"].add-todo').val();

	if (todo !== null) {

	$('.todo-list').append(getToDoHtml(todo));
	$('input[type="text"].add-todo').val(null);
	}
	});

	// when edit link is clicked for a particular todo item, changes HTML so that todo item can be edited
	$('a.edit').live('click', function () {

	$(this).siblings('.remove').remove();
	var todoSpan = $(this).siblings('span');
	var todo = $(todoSpan).text();
	var edittodo = '<input class="editing" type="text" data-original-value="' + todo + '" value="' + todo + '" />';
	todoSpan.replaceWith(edittodo);

	var actions = '<a class="save">Save</a><a class="cancel">Cancel</a>';
	$(this).replaceWith(actions);
	});

	// While in edit mode, when save link is clicked, saves the changes
	$('a.save').live('click', function () {

	var todo = $(this).parent().children('.editing').val();

	if (todo !== null) {
	$(this).parent().replaceWith(getToDoHtml(todo));
	}
	});

	// While editing, when cancel link is clicked, goes back to todo item list
	$('a.cancel').live('click', function () {
	var todo = $(this).parent().children('.editing').attr('data-original-value');

	if (todo !== null) {
	$(this).parent().replaceWith(getToDoHtml(todo));
	}
	});

	// When clicked on remove link for a particular todo item, removes that item
	$('a.remove').live('click', function () {

	var confirmremove = confirm("Are you sure you want to remove this todo item?");

	if (confirmremove) {
	$(this).parent().remove();
	}

	});
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Todo example</title>
	<style>
	input[type="submit"].add-todo { margin-left: 20px;}
	span.add-todo { font-size: 20px;}
	input[type="text"].add-todo, input[type="text"].editing {font-size: 20px; margin-left: 40px;}
	ul.todo-list li {list-style: none;margin-left: 40px;}
	ul.todo-list li span{font-size: 20px;padding: 10px;}
	ul.todo-list li .edit{padding-left: 30px;font-size: 10px;color: red;}
	ul.todo-list li .remove{padding: 10px;font-size: 10px;color: red;}
	ul.todo-list li .save{ padding-left: 30px;font-size: 10px;color: green;}
	ul.todo-list li .cancel{padding: 10px;font-size: 10px;color: red;}
	</style>
	<script src="./jquery-1.5.1.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="./todo-1.js"></script>
	</head>
	<body>
	<div class="add-todo">
	<span class="add-todo">Add a new todo item</span>
	<input type="text" class="add-todo"/>
	<input class="add-todo" type="submit" value="Add"/>
	</div>
	<h2>Here is your list of todo...</h2>
	<ul class="todo-list">
	</ul>
	</body>
	</html>