Minimal To-do List And Task Manager App Using jQuery And Local Storage

A minimal, lightweight, jQuery based to-do list and task manager web application that allows to store data locally within the user's browser using HTML5 local storage.

How to use it:

1. Create an empty html list for the to-do list and task manager.

<ul id="list-items"></ul>

2. Create a form to add new entries.

<form class="add-items">
  <input type="text" class="form-control" id="todo-list-item" placeholder="What do you need to do today?">
  <button class="add" type="submit">Add to List</button>
</form>

3. Load the necessary jQuery library in the html document.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>

4. The core JavaScript (jQuery script)

$(document).ready(function () {

  $('#list-items').html(localStorage.getItem('listItems'));
    
  $('.add-items').submit(function(event) 
  {
    event.preventDefault();

    var item = $('#todo-list-item').val();

    if(item) 
    {
      $('#list-items').append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
      
      localStorage.setItem('listItems', $('#list-items').html());
      
      $('#todo-list-item').val("");
    }
    
  });

  $(document).on('change', '.checkbox', function() 
  {
    if($(this).attr('checked')) 
    {
      $(this).removeAttr('checked');
    } 
    else 
    {
      $(this).attr('checked', 'checked');
    }

    $(this).parent().toggleClass('completed');
    
    localStorage.setItem('listItems', $('#list-items').html());
  });

  $(document).on('click', '.remove', function() 
  {
    $(this).parent().remove();
    
    localStorage.setItem('listItems', $('#list-items').html());
  });

});

5. Style the to-do list and task manager in the CSS whatever you like.

form {
  outline: 0;
  height: 36px;
  margin-top: 5%;
  border: 3px solid #3b3b3b;
}

input[type="text"] {
  outline: 0;
  width: 55%;
  height: 32px;
  border: none;
  font-size: 18px;
  font-weight: normal;
  padding-left: 10px;
}

.add {
  outline: 0;
  float: right;
  width: 34%;
  height: 36px;
  color: #fff;
  font-size: 18px;
  border: none;
  cursor: pointer;
  background-color: #3b3b3b;
}

ul {
  padding: 0;
  text-align: left;
  list-style: none;
}

hr {
  border-bottom: 0;
  margin: 15px 0;
}

input[type="checkbox"] { width: 30px; }

.remove {
  float: right;
  cursor: pointer;
}

.completed { text-decoration: line-through; }

---

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