To Do List

To do list uses jQuery and Bootstrap.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body>
<div class="container">

	<div class="panel panel-default">

		<!-- Default panel contents -->
		<div class="panel-heading"><h3 class="panel-title">To Do List</h3></div>

	  <!-- List group -->
	<ul id="list" class="list-group">
		<li class="list-group-item"><span class="badge">X</span>Pushups! </li>
		<li class="list-group-item"><span class="badge">X</span>Get Money</li>
		<li class="list-group-item"><span class="badge">X</span>Increase my word power</li>
		<li class="list-group-item"><span class="badge">X</span>Beat God at his own game</li>
		<li class="list-group-item"><span class="badge">X</span>Make everything go my way</li>
	</ul>
	</div>

	<!-- text input & button -->
	<div class="row">
		<div class="col-lg-6">
			<div class="input-group">
				<span class="input-group-btn">
					<button id="addButton" class="btn btn-default" type="button">Add</button>
				</span>
				<input id="input" type="text" class="form-control">
			</div> <!-- end input group -->
		</div> <!-- end col-lg-6 -->
	</div> <!-- end row -->
	<br>
</div>
</body>

JavaScript

$(document).ready(function() {
	//add item if the button is clicked
	$('#addButton').click(function(){
		$('<li class="list-group-item"><span class="badge">X</span>' + $('#input').val() + '</li>').appendTo('#list');
        $(".badge").last().click(function () {$(this).parent().remove();});
		$('#input').val(null);
	});

	//add item if the enter key is pressed
	$('#input').bind("enterKey",function(e){
		$('<li class="list-group-item"><span class="badge">X</span>' + $('#input').val() + '</li>').appendTo('#list');
        $(".badge").last().click(function () {$(this).parent().remove();});
		$('#input').val(null);
	});

	$('#input').keyup(function(e){
	    if(e.keyCode == 13) {
	        $(this).trigger("enterKey");
	    }
	});

	//remove an item by clicking the badge
	$('.badge').click(function() {
		$(this).parent().remove();
	});
});