<div id="header">
  <h1>Todon't</h1>
  <h2>You did it? YOU FAILED!</h2>
</div>

<div id="main">

  <div id="stats" class="cols3 clearfix">

    <div class="todonts col">
      Todon'ts: <span>0</span>
    </div>

    <div class="fails col">
      Fails: <span>0</span>
    </div>

    <div class="total col">
      Total: <span>0</span>
    </div>

  </div>

  <form id="form-add-task" action="" method="post" accept-charset="utf-8">
    <input id="add-task" type="text" name="task" value="" placeholder="Add new task">
    <input type="submit" name="submit" value="Wyślij" hidden>
  </form>

  <ul id="tasks"></ul>

</div>

@import url(https://fonts.googleapis.com/css?family=Exo:400,700);

body {
  background: #333;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
  font-size: 12px;
}

a, a:visited {
  color: #767676;
  font-weight: bold;
  text-decoration: none;
}
a:hover, a:focus { color: #eb6136; }

:focus {outline: none;}

* {
  box-sizing: border-box;
  transition:.25s ease-in-out;
}

.clearfix:before,
.clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; }

.col { float: left; padding-right: 30px; }
.col:last-child { padding-right: 0; }
.cols2 .col { width: 50%; }
.cols3 .col { width: 33.33%; }

#header { 
  padding: 20px 0;
  text-align: center; 
}
  #header h1 {
    color: #181818;
    font: 700 38px/40px Exo;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    margin: 0;
  }
  #header h2 {
    color: #999999;
    font-size: 14px;
    font-weight: normal;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    margin: 10px 0 0 0;
  }

#main {
  background-color: #f2f2f2;
  border: 1px solid #333333;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  padding: 25px;
  max-width: 600px;
  margin: 0 auto;
}
  #stats{
    color: #888888;
    font-size: 15px;
    line-height: 23px;
    text-align: center;
    margin-bottom: 15px;
  }
    #stats .col{
      padding: 10px;
      border-left: 1px solid #fff;
      border-right: 1px solid #d8d8d8;
    }
    #stats .col:first-child{ padding-left: 0; border-left: 0; }
    #stats .col:last-child { padding-right: 0; border-right: 0; }
    #stats span{
      border-radius: 25px;
      color: #fff;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      min-width: 23px;
      text-align: center;
      vertical-align: top;
    }
    #stats .todonts span{ background-color: #aee263; }
    #stats .fails span{ background-color: #eb6136; }
    #stats .total span{ background-color: #b4b4b4; }


  #add-task, #tasks {
    border: 1px solid #c5c5c5;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    border-radius: 3px;
  }
  #add-task {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) inset;
    height: 40px;
    padding: 10px;
    margin-bottom: 15px;
    width: 100%;

    color: #767676;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
  }

  #tasks::-webkit-scrollbar { width:5px; height:5px; }
  #tasks::-webkit-scrollbar-button:start:decrement,
  #tasks::-webkit-scrollbar-button:end:increment, { display:block; height:5px; }
  #tasks::-webkit-scrollbar-button:vertical:increment{ background-color:transparent; }
  #tasks::-webkit-scrollbar-track:enabled {
    background-color:rgba(113,112,107,0.1);
    -webkit-border-radius:5px;
  }
  #tasks::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color:rgba(0,0,0,.2);
    -webkit-border-radius:5px;
  }

  #tasks::-webkit-scrollbar-thumb:horizontal {
    width:50px;
    background-color:rgba(0,0,0,.2);
    -webkit-border-radius:5px;
  }
  
  #tasks {
    background-color: #fff;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3) inset; 
    overflow: auto;
    list-style: none;
    height: 200px;
    position: relative;
    padding: 0;
    margin: 0;
  }
    #tasks li {
      border-left: 3px solid #aee263; 
      padding: 0 10px;
      position: relative;

      color: #898989;
      line-height: 28px;
    }
    #tasks li.failed { 
      color: #cea398;
      border-left-color: #eb6136; 
    }
    #tasks li:hover {
      background-color: #f9f4ca;
      color: #757575;
    }
      
    #tasks li:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      top: 3px;
      left: -3px;
      margin-top: -3px;
      border-width:3px;
      border-style: solid;
      border-color: transparent;
      border-top-color: #aee263;
    }
    #tasks li.failed:before { border-top-color: #eb6136; }
    #tasks li:hover .task-actions { display: block; }
    #tasks .task-actions {
      display: none;
      float: right;
    }
    #tasks .task-actions a{
      display: inline-block;
      font-size: 10px;
      padding: 0 0 0 5px;
      text-align: center;
    }

/* 
* Todon't app for Design it & Code it
* http://designitcodeit.com/i/4
*/

var o = $({});
$.each(
  { "subscribe" : "on", "unsubscribe" : "off", "publish" : "trigger" },
  function ( fn, api ) {
    $[ fn ] = function() {
      o[ api ].apply( o, arguments );
    };
  });

var Todont = {
  
  tasks: $('#tasks'),
  
  stats: {
    todonts: 0,
    fails: 0,
    total: 0
  },
  
  init: function() {
    
    $.subscribe('task/add', this.add);
    $.subscribe('task/add', this.statsUpdate);
    
    $.subscribe('task/done', this.done);
    $.subscribe('task/done', this.statsUpdate);
    
    $.subscribe('task/remove', this.remove);
    $.subscribe('task/remove', this.statsUpdate);
    
    this.initEvents();
    
  },
  
  initEvents: function() {
    
    $('#form-add-task').on('submit', function() {
      event.preventDefault();
      $.publish('task/add', '#add-task');
    });
    
    $('#tasks').delegate('.action-done', 'click', function() {
      var button = $(this);
      $.publish('task/done', button);
    });
    
    $('#tasks').delegate('.action-remove', 'click', function() {
      var button = $(this);
      $.publish('task/remove', button);
    });
    
  },
  
  add : function(e, input) {
    var task = $(input).val(),
        taskID = 'task-'+(++Todont.stats.total),
        $task = $('<li/>').attr('id', taskID).text(task);
    
    if (task !== '') {
      $task.append(
        '<div class="task-actions">' +
        '<a href="#done" class="action-done">Done</a>' +
        '<a href="#remove" class="action-remove">Remove</a>' +
        '</div>'
      );
      Todont.tasks.prepend($task);
      $(input).val('');
    }
    
  },
  
  done : function(e, button) {
    var task = $(button).parent().parent();
    
    task.toggleClass('failed');
    
    $(button).text(task.hasClass('failed') ? 'Undone' : 'Done');
  },
  
  remove : function(e, button) {
    $(button).parent().parent().remove();
  },
  
  statsUpdate: function() {
    var elements = Todont.tasks.children();
    
    Todont.stats.todonts = elements.not('.failed').length;
    Todont.stats.fails = elements.filter('.failed').length;
    Todont.stats.total = elements.length;
    
    $('#stats .todonts span').text(Todont.stats.todonts);
    $('#stats .fails span').text(Todont.stats.fails);
    $('#stats .total span').text(Todont.stats.total);
  }
  
};

Todont.init();