jQuery Based Simple Responsive To-do List Manager

A simple responsive to-do list manager built with jQuery that allows you to add, check, delete tasks with ease.

How to use it:

1. Include the required Font Awesome 4 for the icons.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Create a form to accept new tasks.

<form class="new">
  <input id="new" placeholder="New Item" type="text">
  <button class="fa fa-plus"></button>
</form>

3. Create a list with preset tasks.

<ul class="list">
  <li class="item">
    <input type="text" value="jQuery">
    <ol>
      <li class="check fa fa-check"></li>
      <li class="delete fa fa-times"></li>
    </ol>
  </li>
  <li class="item">
    <input type="text" value="jQuery Plugin">
    <ol>
      <li class="check fa fa-check"></li>
      <li class="delete fa fa-times"></li>
    </ol>
  </li>
  <li class="item">
    <input type="text" value="jQuery Script">
    <ol>
      <li class="check fa fa-check"></li>
      <li class="delete fa fa-times"></li>
    </ol>
  </li>
</ul>

4. The required CSS to style the to-do list manager.

*, *:before, *:after {
  margin:0; padding:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}

body {
  background: #222222;
}

ul, ol { list-style:none}

body, input {
  font-family: 'Open Sans', sans-serif;
  font-size: 14pt;
  color: white;
  text-align: justify;
  line-height: normal;
  font-smoothing: antialiased;
}


#list .new {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  clear: both;
  height: 100px;
  background: #222222;
}
#list .new #new {
  float: left;
  width: calc(100% - 100px);
  height: 100px;
  padding: 0;
  margin: 0;
  outline: 0;
  border: 0;
  background: transparent;
  line-height: 50px;
  text-indent: 25px;
}
#list .new #new::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.new button {
  cursor: pointer;
  float: right;
  width: 100px;
  height: 100px;
  padding: 0;
  margin: 0;
  outline: 0;
  border: 0;
  background: #111111;
  font-size: 50pt;
  color: white;
}
.list {
  position: relative;
  top: 100px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
.list .item {
  clear: both;
  height: 50px;
}
.list .item input {
  cursor: default;
  float: left;
  width: calc(100% - 150px);
  height: 50px;
  padding: 0;
  margin: 0;
  outline: 0;
  border: 0;
  background: transparent;
  text-indent: 25px;
}
.list .item input.checked {
  opacity: .5;
  text-decoration: line-through;
}
.list .item ol {
  float: right;
}
.list .item ol li {
  cursor: pointer;
  float: left;
  width: 50px;
  height: 50px;
  font-size: 20pt;
  line-height: 50px;
  text-align: center;
}

5. Include the jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

6. The Javascript to enable the to-do list manager.

$(function(){
  $('.new').submit(function () {
    // ADD ITEM
    if ( $('#new').val() !== '' ) {
      var item = $('input').val(),
          input = '<input type="text" value="' + item + '" />',
          edit = '<ol><li class="check fa fa-check"></li><li class="delete fa fa-times"></li></ol>';
      $('.list').append('<li class="item">' + input + edit + '</li>');
    };
    // CLEAR INPUT
    $('#new').val('');
    // COLORS
    $('.list .item').each(function(e){
      var hue = ( e * 3 );
      $(this).css({ backgroundColor: 'hsl(' + hue + ',75%,50%)' });
      $('ol li', this).each(function(i){
        var o = .1 + ( i * .1 );
        $(this).css({ backgroundColor: 'rgba(0,0,0,' + o + ')' });
      });
    });
    // CHECK & DELETE
    $('.list .item ol li').on('click',function(){
      if ( $(this).hasClass('check') ) {
        $(this).parent('ol').parent('.item').find('input').toggleClass('checked');
      } else if ( $(this).hasClass('delete') ) {
        $(this).parent('ol').parent('.item').remove();
      }
    });
    return false;
  });
  // COLORS
  $('.list .item').each(function(e){
    var hue = ( e * 3 );
    $(this).css({ backgroundColor: 'hsl(' + hue + ',75%,50%)' });
    $('ol li', this).each(function(i){
      var o = .1 + ( i * .1 );
      $(this).css({ backgroundColor: 'rgba(0,0,0,' + o + ')' });
    });
  });
  // CHECK & DELETE
  $('.list .item ol li').on('click',function(){
    if ( $(this).hasClass('check') ) {
      $(this).parent('ol').parent('.item').find('input').toggleClass('checked');
    } else if ( $(this).hasClass('delete') ) {
      $(this).parent('ol').parent('.item').remove();
    }
  });
});

---

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