Stylish Task Manager App with jQuery and Local Storage - Tasks Manager

Just another task manager (todo list) web application built on top of jQuery, CSS3, Html5 and Bootstrap 3. All the tasks are stored in Html5 localStorage or local cookies (jQuery cookie.js is required) so you can restore them any time as you wish.

How to use it:

1. Include Twitter Bootstrap 3 and the jQuery Tasks Manager's stylesheets in the head section of the document.

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

2. Include jQuery library and other required JS resources at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/helpers.js"></script>

3. Create the Html for a task manager toolbar which allows you to switch between task status.

<div class="toolbar" role="tablist">
  <ul>
    <li class="active">
      <a href="#tasksTab" id="tasksTabBtn" role="tab" data-toggle="tab">
        <i class="glyphicon glyphicon-tasks"></i>  Tasks<span id="tasksLength"></span>
      </a>
    </li>
    <li>
      <a href="#archiveTab" id="archiveTabBtn" role="tab" data-toggle="tab">
        <i class="glyphicon glyphicon-inbox"></i>  Archive <span id="archiveLength"></span>
      </a>
    </li>
    <li>
      <a href="#trashTab" id="trashTabBtn" role="tab" data-toggle="tab">
        <i class="glyphicon glyphicon-trash"></i>  Trash <span id="trashLength"></span>
      </a>
    </li>
  </ul>
</div>

4. Create New Task elements to accept new tasks.

<div class="task clearfix" id="task-new">
  <input id="task-title" name="task-title" type="text" value="" placeholder="Titulo">
  <textarea id="task-body" name="task-body" type="text" value="" placeholder="Add Task"></textarea>
  <ul class="task-controls">
    <li>
      <a id="newBtn" class="button" href="javascript:;" onclick="TaskManager.add()"><span><i class="glyphicon glyphicon-ok"></i> Done</span></a>
    </li>
  </ul>
  <div id="task-controls" class="task-controls clearfix">

  </div>
</div>

5. Create the Html for tasks containers.

<div class="tab-content">
  <!-- Tasks Section Tab -->
  <div class="tab-pane active" id="tasksTab">
    <div id="tasks" class="tasks">
      <ul id="tasks-list" class="tasks-list">
        <!-- Created Tasks will be created here! -->
      </ul>
    </div>
  </div>
  <!-- Archive Section Tab -->
  <div class="tab-pane" id="archiveTab">
    <!-- Archived Tasks will be created here! -->
    <ul id="archive-list" class="tasks-list">
      <!-- Created Tasks will be created here! -->
    </ul>
  </div>
  <!-- Trash Section Tab -->
  <div class="tab-pane" id="trashTab">
    <!-- Trashed Tasks will be created here! -->
    <ul id="trash-list" class="tasks-list">
      <!-- Created Tasks will be created here! -->
    </ul>
  </div>
</div>

Change log:

2014-10-13

• new UI visual

---

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