JSFiddle - React, Tailwind, and code Playground

by Łukasz Bącik

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<!doctype html>
<html ng-app>
<head>
    
</head>
<body>
<div ng-controller="TodoCtrl">
    <h2>Total todos: {{getTotalTodos()}}</h2>
    <ul class="unstyled">
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
    </ul>
    <form class="form-horizontal">
        <input type="text" ng-model="formTodoText" ng-model-instant>
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
    </form>

    <button class="btn-large" ng-click="clearCompleted()"><i class="icon-trash"></i>Clear Completed</button>
</div>
</body>
</html>

CSS

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

JavaScript

function TodoCtrl($scope) {
    $scope.todos = [
        {text:'Learn AngularJS', done:false},
        {text:'Build an app', done:false}
    ];

    $scope.getTotalTodos = function () {
        return $scope.todos.length;
    };

    $scope.clearCompleted = function () {
        $scope.todos = _.filter($scope.todos, function(todo){
            return !todo.done;
        });
    };

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