todo list

HTML

<div id="app-TodoList">
  <form id="frm-Todo">
    <input type="submit" value="+" id="btn-Add" name="btn-Add" />
    <input type="text" placeholder="type a to-do here" name="in-Todo" id="in-Todo" />
  </form>
  <div id="list-Todos">
    <label>
      <input type="checkbox" /><span class="check"></span><span class="todo">make a to-do list</span></label>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0
}

body {
  background: #454545;
}

#app-TodoList {
  width: 100%;
  background: #585;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#frm-Todo {
  display: block;
  overflow: hidden;
  width: 100%;
  position: relative;
}

#in-Todo {
  position: relative;
  display: block;
  float: left;
  width: calc(100% - 40px);
  height: 40px;
  line-height: 40px;
  border: 0;
  outline: 0;
  padding: 10px 15px;
  box-sizing: border-box;
  font: 20px Arial;
  color: #fff;
  background: #454545;
}

#btn-Add {
  position: relative;
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 10px;
  border: 1px solid #454545;
  text-align: center;
  box-sizing: border-box;
  font: 20px Arial;
  color: #fff;
  background: #585;
}

#list-Todos label {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  box-sizing: border-box;
}

#list-Todos label input[type="checkbox"] {
  display: none;
}

#list-Todos label span.check {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    padding: 2px;
    margin: 5px;
    border: 1px solid #585;
    box-sizing: border-box;
    font: 20px Arial;
    background: #454545;
}

#list-Todos label span.check:after {
  display: block;
  content: "";
  position: relative;
  left: 5px;
  top: 5px;
  width: 15px;
  height: 10px;
  border: 0px solid #000;
  transform: rotate(135deg);
  transition: all .2s ease-in-out;
  box-sizing: border-box;
}

#list-Todos label input:checked ~ span.check:after {
  border: 2px solid #fff;
  border-bottom: 0;
  border-left: 0;
}

#list-Todos label input:checked ~ span.todo {
  text-decoration: line-through;
}

#list-Todos label span.todo {
    position: relative;
    display: block;
    float: left;
    height: 40px;
    width: calc(100% - 40px);
    line-height: 30px;
    padding: 10px 15px;
    font: 20px Arial;
    box-sizing: border-box;
    color: #fff;
}

JavaScript

listTodo = [];
listTodoDisplay = $('#list-Todos');
listTodoDisplay.sortable();
$('#frm-Todo').on("submit", function(e) {
  e.preventDefault();
  var todoInput = $('#in-Todo').val(),
    found = $.inArray(todoInput, listTodo);

  if ((todoInput !== "") && (!(found > -1))) {
    listTodoDisplay.prepend('<label><input type="checkbox"/><span class="check"></span><span class="todo">' + todoInput + '</span></label>');
    listTodo.push(todoInput);
  }
});
$('#list-Todos').on("change",'input[type="checkbox"]',function(){
	if ($(this).is(':checked')){
  	$(this).parents('label').appendTo($(this).parents('#list-Todos'));
  }
  else {
  	$(this).parents('label').prependTo($(this).parents('#list-Todos'));
  }
});