Beautiful Html5 Todo App using jQuery and Bootstrap - listo

A stylish jQuery, Html5, and Bootstrap based todo list app which allows you to add, remove, delete tasks in 3 states (New, In Progress and Archived). All the item added in the todo list will be pushed into a JS array so you can restore your data anytime and anywhere using Html5 localStorage technique.

How to use it:

1. Load the core CSS and the Bootstrap's CSS in the head section of your document.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="app/css/main.css">

2. Create a todo list web app following the Html structure as shown below.

<div class="container">
  <div class="col-lg-12">
    <section class="col-md-4">
      <div class="panel panel-danger ">
        <div class="panel-heading">
          <form class="form-group" id="newTaskForm">
            <div class="input-group" style="margin-bottom:-40px;">
              <div class="input-group-addon" id="saveNewItem"><a href="">Save</a></div>
              <div class="input-group-addon" id="cancel"><a href="">Cancel</a></div>
              <input class="form-control" type="text" id="newItemInput" placeholder="New Item">
            </div>
          </form>
          <div class='new-item-header'> <span id="newHeading">New</span> <a href="#newItem" class="pull-right pencil" id="newListItem" style="">&#9783;</a> </div>
        </div>
        <div class="panel-body">
          <ul class="list-group" id='newList'>
          </ul>
        </div>
      </div>
    </section>
    <section class="col-md-4">
      <div class="panel panel-warning ">
        <div class="panel-heading"> In Progress </div>
        <div class="panel-body">
          <ul class="list-group" id="currentList">
          </ul>
        </div>
      </div>
    </section>
    <section class="col-md-4">
      <div class="panel panel-success ">
        <div class="panel-heading"> Archived </div>
        <div class="panel-body">
          <ul class="list-group" id="archivedList">
          </ul>
        </div>
      </div>
    </section>
  </div>
</div>

3. Include the jQuery library and the app.js script at the bottom of your document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="app/js/app.js"></script>

---

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