4#. Todon't - "Design it & Code it"

by Umar

HTML

<link href='http://fonts.googleapis.com/css?family=Exo:400,700' rel='stylesheet' type='text/css'>

<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>

CSS

body {
  background: #333 url(img/bg.png);
  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;}

* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;

  -ms-transition:.25s ease-in-out;
  -moz-transition:.25s ease-in-out;
  -o-transition:.25s ease-in-out;
  -webkit-transition:.25s ease-in-out;
  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; }
  ...

JavaScript

/**
 *
 * 4#. Todon't - "Design it & Code it"
 *
 * Author: Idered <http://idered.pl>, IderedPL[at]gmail[dot]com
 * Concept and design rights reserved.
 * Code is relased under MIT License.
 *
 */

(function($) {

  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');

     ...