Printable Checklist

index.html

<form>
  <ul>
    <li class = "title"><input contenteditable="true" maxlength = "30" placeholder = "Printable Checklist" /></li>
    <li class = "item1"><input type="checkbox" id = "item1" /><label for = "item1" title = 'Mark Complete'></label><input maxlength = "50" autofocus = "autofocus" placeholder = "Click to edit" class = "item1-textbox" /><span class = "icon-remove" title = "Remove item"></span>
    </li>
  </ul>
</form>

<div class = "add">Add item</div>
<div class = "print">
  <a href="javascript:window.print()">
    <span>Print List</span>
  </a>
</div>

Printable-Checklist.markdown

Printable Checklist

A printable checklist, uses a bit JQuery to add/remove items.

A Pen by James Barnett on CodePen.

License.

script.js

/*jshint multistr: true */
$(document).ready(function(){
  var count = 1;
  
  $(".add").click(function() {
    count++;
    $("ul").append("<li class = \'item" + count + "\'>" +
                   "<input type='checkbox' id = \'item" + count + "\' />" +
                   "<label for = \'item " + count + " \' title = 'Mark Complete'></label>" +
                   "<input maxlength = '50' autofocus = 'autofocus' \
                    placeholder = 'Click to edit' class = \'item" + count + "-textbox\' />" +
                   "<span class = 'icon-remove' title = 'Remove item'></span>" +
                   "</li>");
    iconRemove(); //allow removal of items added via JQuery
    //store();
    //viewData();
  });
  
  iconRemove(); //allow removal of initial item before an item is added
  function iconRemove() {
    $("[class*='icon-remove']").click(function() {
      $(this).parents("li[class*='item']").remove(); 
      /*itemStore = $(this).parents("li").attr('class');
      localStorage.removeItem(itemStore);
      console.log(itemStore);*/
    });
  }
  
  /*
  store();
  function store() {
    itemClass = ".item" + count + "-textbox";
    itemStore = "item" + count;  
    if ( localStorage.getItem(itemStore) ) {
      $(itemClass).val(localStorage.getItem(itemStore));
    }
    
    $(itemClass).on('keyup', function() {
      localStorage.setItem(itemStore, $(this).val());
    });
  }
  
  // for troubleshooting only
  viewData();
  function viewData() {
    for (i = 0; i < localStorage.length; i++) {
      key = localStorage.key(i);
      value = localStorage.getItem(key);
      console.log(key + ": " + value);
    }
  }*/
  
});

style.css

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

body { 
  margin: 50px auto;
  position: relative;
  width: 600px;
  font-size: 19px;
}

ul {padding: 0; }
li { 
  list-style: none;  
  margin-top: 5px;
  width: 500px;
}

li, .add, .print { margin-left: 5px; }

/***** Title *****/

.title input{ 
  font-size: 2em; 
  height: 50px;
  font-weight: 600;
  margin-left: -2px;
}

.title input::-webkit-input-placeholder { color: inherit; }
.title input:-moz-placeholder { color: inherit; }
.title input::-moz-placeholder { color: inherit; }
.title input:-ms-input-placeholder { color: inherit; }

/***** Checkboxes *****/

/* to hide the checkbox itself */
input[type=checkbox] { display: none; } 
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-size: 22px;
}

input[type=checkbox] + label:before { content: "\f096"; } 
input[type=checkbox]:checked + label:before { content: "\f046"; } 
input[type=checkbox] + label:before { letter-spacing: 10px; }
input[type=checkbox]:checked + label:before { letter-spacing: 7px; }

/***** Text box *****/

input { 
  display: inline-block;
  width: 400px;
  height: 25px;
  resize: none;
  box-sizing: border-box;
} 

input:focus, input:hover { 
  border: 1px dashed lightgrey;
}

input { 
  border: none;
  outline: none;
}

/***** Remove Button *****/

.add, .icon-remove { cursor: pointer; }
.icon-remove { display: none; }
li:hover .icon-remove, 
li:focus .icon-remove, 
input:focus + .icon-remove {
  display: inline;
  vertical-align: middle;
  
  font-size: 22px;
  color: #f86f69;
  margin-left: 5px;
}

/***** Add Button *****/

.add:before { 
  display: inline-block;
  vertical-align: middle;
  
  font-family: FontAwesome;
  font-size: 22px;
  color: #95dd6f;
  
  content: "\f067";
  letter-spacing: 14px;
}

/***** Print Button *****/

.print { margin: 10px 5px; }
.print a { 
  text-decoration: none;
  color: black;
}

.print:before { 
  display: inline-block;
  vertical-align: middle;
  
  font-family: FontAwesome;
  font-size: 22px;
  
  content: "\f02f";
  letter-spacing: 5px;
}


/***** Print Stylesheet *****/

@media print {
  .add, .print { display: none; }
  li .icon-remove { display: none !important; }
}