JSFiddle - React, Tailwind, and code Playground

by IgorMinar

HTML

<script src="http://code.angularjs.org/angular-0.9.18.min.js"
        ng:autobind></script>

<div ng:controller="TodoCtrl">
  <form ng:submit="addTodo()">
    <input type="text" name="todoText" size="35"
           placeholder="enter your todo here">
    <input type="submit" value="add"><br>
    <span>{{remaining()}} remaining</span>
    <input type="button" ng:click="removeDone()" value="clean up">
  </form>

  <ul>
    <li ng:repeat="todo in todos">
      <input type="checkbox" name="todo.done">
      <span ng:class="'done-' + todo.done">{{todo.text}}</span>
    </li>
  </ul>
</div>

CSS

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

JavaScript

function TodoCtrl() {
  var scope = this;
  scope.todos = [{text:'learn angular', done:true},
                 {text:'build an angular app', done:false}];

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

  scope.remaining = function(){
    return angular.Array.count(scope.todos, function(todo){
      return !todo.done;
    });
  };

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