Todo

index.haml

%p Simple todo-"app". Try hover and drag todo items.

.container
  .add
    %i.fa.fa-plus
  .title
    %h1 Things to do
  .new-task
    %a.add-new{:href => "#"}
      %i.fa.fa-plus
    %input#todo-text{:placeholder => "New task"}
  %ul
    %li.row
      %a.remove{:href => "#"}
        %i.fa.fa-trash-o
      %a.completed{:href => "#"}
        %i.fa.fa-check
      Go to the bank
      
    %li.row
      %a.remove{:href => "#"}
        %i.fa.fa-trash-o
      %a.completed{:href => "#"}
        %i.fa.fa-check
      Buy food
      
    %li.row
      %a.remove{:href => "#"}
        %i.fa.fa-trash-o
      %a.completed{:href => "#"}
        %i.fa.fa-check
      Clean the house
      
    %li.row
      %a.remove{:href => "#"}
        %i.fa.fa-trash-o
      %a.completed{:href => "#"}
        %i.fa.fa-check
      Make dinner
      
    %li.row
      %a.remove{:href => "#"}
        %i.fa.fa-trash-o
      %a.completed{:href => "#"}
        %i.fa.fa-check
      Pick up the kids   

script.js

$(document).on('click', '.remove', function() {
  $(this).parent().slideUp();
});

$(document).on('click', '.completed', function() {
   $(this).parent().toggleClass("done" );
});

$( "ul" ).sortable();

$(".add").click(function(){
				  $(".new-task").slideToggle();
  $("#todo-text").focus();
});

// Pressing enter
$(document).keypress(function(e) {
    var str = $( "#todo-text" ).val();
  
    if(e.which == 13 && str != "" && str != null ) {
       $( "<li class='row'><a class='remove' href='#'><i class='fa fa-trash-o'></i></a><a class='completed' href='#'><i class='fa fa-check'></i></a>"+ str +"</li>" ).fadeIn().appendTo("ul");
       $( "#todo-text" ).val("");
       $( "#todo-text" ).focus();
    }
});

// Press the + sign
$(".add-new").click(function(){
  var str = $( "#todo-text" ).val();
  
     if( str != "" && str != null) {
	       $( "<li class='row'><a class='remove' href='#'><i class='fa fa-trash-o'></i></a><a class='completed' href='#'><i class='fa fa-check'></i></a>"+ str +"</li>" ).fadeIn().appendTo("ul");
       $( "#todo-text" ).val("");
       $( "#todo-text" ).focus();
     }
});

style.sass

*,*:before,*:after
  box-sizing: border-box
p
  color: #eee
  text-align: center
  margin: 60px 0 30px 0

li
  list-style: none

body
  font-family: 'Open Sans', sans-serif
  background: #34495e
  font-size: 14px
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility
  
.container
  background: #2c3e50
  overflow: hidden
  width: 360px
  margin: 0 auto
  color: #FFF
  border-radius: 3px 3px 0 0
  box-shadow: 10px 10px 0 rgba(0,0,0,.2)
  .title
    background: rgba(#3498db, 1)
  h1
    font-size: 20px
    font-weight: 600
    padding: 10px 15px
    text-transform: uppercase

.add
  float: right
  border-radius: 3px
  margin-right: 20px
  margin-top: 5px
  padding: 8px 10px
  background: #2980b9
  &:hover
    background: rgba(0,0,0,.3)
    cursor: pointer

.row
  color: #333
  background: #FFF
  width: 100%
  height: 40px
  padding-left: 10px
  line-height: 2.8

  &:hover a
    width: 40px
    opacity: 1
    
  &:nth-child(2n)
    background: #f7f7f7
    
  &:hover
    background: #eee
    

.remove, .completed
  float: right
  text-align: center
  height: 40px
  width: 0
  background: #2ecc71
  color: #FFF
  opacity: 0
  text-decoration: none
  display: inline-block
  transition: all .2s ease
  &:hover
    background: #27ae60

.remove
  background: #e74c3c
  &:hover
    background: #c0392b
.done
  text-decoration: line-through
  color: #ccc
 
.add-new
  float: right
  height: 40px
  width: 40px
  text-align: center
  background: #2ecc71
  color: #FFF
  line-height: 2.8
  transition: all .3s linear
  &:hover
    background: #27ae60
    
.new-task
  display: none
  input
    -webkit-appearance: none
    -moz-appearance: none
    border-radius: 0
    background: #ecf0f1
    font-size: 14px
    font-family: 'Open Sans', sans-serif
    width: 320px
    padding: 5px 10px
    height: 40px
    border: none
    outline: none
    
    
// Add shadow when draggin a todo item
.ui-sortable-helper
  box-shadow: 10px 10px 0 rgba(0,0,0,.2)

Todo.markdown

Todo

Just a simple Todo app

A Pen by Adam Lindqvist on CodePen.

License.