add list sample

by Yoshiharu Kamata

HTML

<button id="add">add</button>
<button id="change">change</button>
<ul>
    <li>abc</li>
</ul>

CSS

li {
    border: 1px solid red;
    padding: 6px;
    background-color: #39C;
-webkit-transition: background-color 1s linear, color 1s linear, border-color 1s linear;
}
.change {
    background-color: #990;

}

CoffeeScript

$ ->
  counter = 0
  $("#add").on "click", ->
    $("<li>add #{counter++}</li>").prependTo("ul")
    setTimeout ->
      $("li").addClass "change"
    ,1
  $("#change").on "click", ->
    $("li").addClass "change"