JSFiddle - React, Tailwind, and code Playground

by justbn

HTML

<body ng-app="app">
        
    <div ng-controller="ToDoController">
        
        <h2>ToDos</h2>
        <p>{{getRemaining()}} of {{todos.length}}</p>
        
        <ul ng-repeat="todo in todos">
            <li class="done-{{todo.completed}}">
                <input type="checkbox" ng-model="todo.completed"/>
                {{todo.item}}
            </li>
        </ul>
        
        <input type="text" ng-model="newToDo"/>
        <input type="submit" value="Add ToDo" ng-click="addToDo()">

        <input type="submit" value="Archive" ng-click="archiveToDods()">
    </div>
    
    
</body>

CSS

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

JavaScript

var app = angular.module("app", []);

app.controller("ToDoController", function($scope) {
    
    $scope.todos = [
        {
            item: 'Clean Room',
            completed: false
        },
        {
            item: 'Clean Bathroom',
            completed: false
        },
        {
            item: 'Clean House',
            completed: false
        },
        {
            item: 'Clean Sink',
            completed: false
        },
        {
            item: 'Clean Toilet',
            completed: false
        }
    ];
    
    $scope.getRemaining = function() {
        var remaining = 0;
        
        angular.forEach($scope.todos, function(item, key) {
            remaining += item.completed ? 0 : 1;
        });
        
        return remaining;
    };
    
    $scope.addToDo = function() {
        $scope.todos.push({item: $scope.newToDo, completed: false});
        $scope.newToDo = '';
    };
    
    $scope.archiveToDods = function() {
        console.log('Archive!!');
        
        var todos = $scope.todos;
        $scope.todos = [];
        
        angular.forEach(todos, function(item,key) {
            console.log('Key=' + key);
            console.log('Item=');
            console.log(item);
            if(item.completed === false) {
                $scope.todos.push(item);
            }
        });
    }
});