JSFiddle - React, Tailwind, and code Playground

by Kamlesh Gupta

HTML

<div ng-app ng-controller="TodoCtrl">
  <h2>Todo</h2>
  <form ng-submit="addTodo()" class="form-inline">
    <div class="form-container">
      <input type="text" ng-model="todoText" size="30" placeholder="add new todo here" class="form-control input-control" aria-describedby="sizing-addon2">
      <input class="btn btn-primary btn-control" type="submit" value="add">
    </div>
  </form>
  <div>

    <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>
      <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="delete()">delete</a> ]
    </ul>

  </div>
</div>

CSS

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

.done-false {}

.btn-control {
  margin-left: 10px;
}

JavaScript

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

  $scope.addTodo = function() {
    console.log($scope.todoText);
    if ($scope.todoText == undefined)
    alert('Name for todo is required');
    else{
      $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.delete = function() {
    var oldTodos = [];
    angular.forEach($scope.todos, function(todo) {
      if (todo.done) oldTodos.push(todo);
    });
    if(oldTodos.length==0)
    alert("No old Todos to delete");
    else {
    var updatedTodos = [];
    angular.forEach($scope.todos, function(todo) {
      if (!todo.done){
        updatedTodos.push(todo);
      }
    });
    $scope.todos =[];
    $scope.todos = angular.copy(updatedTodos);
    }    
  };
}