Simple To-Do List App with jQuery and Bootstrap 3

Yet another simple To-Do list web app built on top of jQuery and Bootstrap 3 that helps you keep track of the things you have to do.

See also:

• Creating A Minimal Todo List Web App With jQuery Todo Plugin

How to use it:

1. Include the latest version of jQuery javascript library from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Include Twitter Bootstrap 3's javascript and CSS in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

3. Create the html for an ultimate To-Do List.

<div class="container" id="main">
<h1>Ultimate To-Do List</h1>
<form role ="form" id="main_input_box">
<label>
<input type="text" class ="form-control" id="custom_textbox" name="Item" placeholder="What do you need to do?">
<input type="submit" value="Add" class="btn btn-primary add_button">
</label>
</form>
<form>
<ol class="list-group list_of_items">
</ol>
</form>
</div>

4. The CSS to style the To-Do list.

.form-control {
display: inline-block;
}
.add_button {
margin: 10px 0px 10px 0px;
}
.checkbox {
margin-top: 20px;
}
.completed_item {
text-decoration: line-through;
}
h1 {
display: inline-block;
color: #292b33;
}
body {
background-color: #f6f6f6;
}
.text_holder {
display: block;
max-width: 100%;
word-wrap: break-word;
}
#main {
margin-top: 50px;
background-color: #ffffff;
border-radius: 5px;
width: 50%;
border: 1px solid #545454;
}

5. The javascript.

$(document).ready(function(){
$("form#main_input_box").submit(function(event){
event.preventDefault();
var deleteButton = "<button class='delete btn btn-warning'>Delete</button>";
var editButton = "<button class='edit btn btn-success'>Edit</button>";
var twoButtons = "<div class='btn-group pull-right'>" + deleteButton + editButton + "</div>";
var checkBox = "<div class='checkbox'><label><input type='checkbox' class='pull-right'></label></div>";
$(".list_of_items").append("<li class='list-group-item'>" + "<div class='text_holder'>" + $("#custom_textbox").val() + twoButtons + "</div>" + checkBox + "</li>");
$("#custom_textbox").val('');
});

$(".list_of_items").on("click", "button.delete", function(){
$(this).closest("li").remove();
});

$(".list_of_items").on("click", "button.edit", function (){
var editItemBox = "<form class='edit_input_box'><input type='text' class='itembox'></form>";
var originalItem = $(this).parent().val();
var deleteButton = "<button class='delete btn btn-warning'>Delete</button>";
var editButton = "<button class='edit btn btn-success'>Edit</button>";
var twoButtons = "<div class='btn-group pull-right'>" + deleteButton + editButton + "</div>";
$(this).closest("div.text_holder").replaceWith(editItemBox);
$("form.edit_input_box ").on("submit", function(){
event.preventDefault(); 
var checkBox = "<label><input type='checkbox'></label>";
$(this).replaceWith("<div>" + $(".itembox").val() + twoButtons + "</div>");
}); 
});

$(".list_of_items").on("click", ":checkbox", function (){
$(this).closest("li").toggleClass("completed_item");
});
});

---

This awesome jQuery plugin is developed by MrDanMacDonald. For more Advanced Usages, please check the demo page or visit the official website.