<!DOCTYPE html>
<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <link rel="stylesheet" href="style.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        <script src='script.js'></script>
		<title></title>
	</head>
	<body>
		<h1>A very simple todo list with no persistence</h1>
		<ol>
			<li>Sample Item 1</li>
			<li>Sample Item 2</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;
}

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

.new {
	background-color: yellow;
}
$(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
434 forks
29450 views

Browse more Codebits