JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<div ng-app>
     <h2>Todo</h2>

    <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
        <ul class="unstyled">
            <li ng-repeat="todo in todos"> <span class="done-{{todo.done}}">{{todo.text}}</span>

                <div class="titleSeperator"></div>
                <ul class="unstyled">
                    <li ng-repeat="todo in todos"> <span class="done-{{todo.done}}">{{todo.text}}</span>

                        <div class="titleSeperator"></div>
                        <ul class="unstyled">
                            <li ng-repeat="todo in todos"> <span class="done-{{todo.done}}">{{todo.text}}</span>

                                <div class="titleSeperator"></div>
                                <ul class="unstyled">
                                    <li ng-repeat="todo in todos"> <span class="done-{{todo.done}}">{{todo.text}}</span>

                                        <div class="titleSeperator"></div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </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

.unstyled {

    padding-left: 24px;

}
.titleSeperator
 {
   background: black ;
   margin-top: 0px;
   margin-bottom: 0px;
   height : 1px;
   width:100%;
 }

JavaScript

function TodoCtrl($scope) {
    $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 () {
        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);
        });
    };
}