JSFiddle - React, Tailwind, and code Playground

by Ajay Bhosale

HTML

<div ng-app ng-controller="TodoController"> <span>{{remaining()}} of {{todos.length}} remaining</span>

    <ul>
        <li ng-repeat="todo in todos">{{$index + 1}}. <span class="done-{{todo.done}}">{{todo.text}}</span>

            <input type="checkbox" ng-model="todo.done">
            <input type="button" ng-click='remove($index)' value='delete'/>
            {{currentTime()}}
        </li>
    </ul>
    <form ng-submit="addTodo()">
        <input type="text" placeholder="add new todo here" size="30" ng-model="todoText">
        <input type="submit" value="add">
    </form>
</div>

CSS

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

JavaScript

function TodoController($scope) {
    $scope.todos = [{
        text: 'Build a Angular JS Demo',
        done: true
    }];
    
    $scope.currentTime = function () {
        return new Date().getTime();
    }
    
    $scope.remaining = function () {
        var count = 0;
        angular.forEach($scope.todos, function (todo) {
            count += todo.done ? 0 : 1;
        });
        return count;
    }

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

    $scope.remove = function (index) {
        $scope.todos.splice(index, 1);
    }
}