AngularJS Example:

by Ford Heacock

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <h1>Todo</h1>
  <div ng-controller="TodoCtrl">
    <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul>
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

ul {
  font-family: monospace;
  font-size: 2em;
  list-style: none;
  margin: 2em;
  padding: 0;
}
ul li {
  margin: 0;
  margin-bottom: 1em;
  padding-left: 1.5em;
  position: relative;
}
ul li:after {
  content: '';
  height: .4em;
  width: .4em;
  background: #D2153A;
  display: block;
  position: absolute;
  transform: rotate(45deg);
  top: .25em;
  left: 0;
}

h1 {
  font-family: Pacifico;
  font-size: 4em;
  line-height: 1em;
  font-weight: normal;
  color: black;
  text-shadow: 2px 2px 3px black;
}

JavaScript

function TodoCtrl($scope) {
  $scope.todos = [];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}