<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
        <title>Simple to-do list</title>
    </head>
    <body>
		<h1>A very simple todo list with no persistence</h1>
		<ol class="ui-sortable">
            <li>Sample Item 1<span class="delete">x</span></li>
			<li>Sample Item 2<span class="delete">x</span></li>
		</ol>
        <label for="newItem">Add a new item:</label>
        <input type="text" id="newItem" name="newItem"><input type="button" id="add" value="Add">
    </body>
</html>
.hovered {
	cursor:move;
	color:green;
}

.delete {
	font-family: sans-serif;
	text-decoration: italic;
	font-size: 100%;
	color: #ccc;
	border: 1px dotted #aaa;
	margin-left: 1em;
	padding: 0 .3em;
	background: red;
	display: inline-block;
}

.delete.hovered {
	cursor: pointer;
	color: #fcc;
}

.new {
	background-color: yellow;
}

li {
    cursor: move;
}
$(document).ready(function() {
	$newItemField = $('#newItem');
	$addButton = $('#add');
	$('ol').sortable();
	$('li').append('<span class="delete">x</span');
	$('ol').delegate('li','mouseover mouseout',function() {
		$(this).toggleClass('hovered');
	});
	$('ol').delegate('li>.delete','mouseover mouseout',function() {
		$(this).toggleClass('hovered');
	});
	$('ol').on('click','li>.delete',function(){
		$(this).parent().remove();
	});
	$newItemField.keypress(function(e) {
		if (e.which == 13) {
			addItem();
		}
	});
    $addButton.click(function() {
		addItem();
    });
});
function addItem() {
	if ($newItemField.val() !== '') {
		$newItem = $('<li/>');
		$newItem.text($newItemField.val());
		$deleteButton = $('<span/>').text('x').addClass('delete');
		$newItem.append($deleteButton);
		$newItem.css('background-color','yellow');
		$newItem.appendTo('ol');
		$newItem.animate({backgroundColor:'white'},5000);
		$newItemField.val('');
	}
}
Created from scratch
227 forks
19196 views

Browse more Codebits