JSFiddle - React, Tailwind, and code Playground

by Shanid

HTML

<div class="todo-list" ng-app>
  <h2>Todo App</h2>
  <div ng-controller="TodoCtrl">
      <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul class="task">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.status">
        <span class="status-{{todo.status}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" required ng-model="todoText" placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="Add new task">
    </form>
  </div>
</div>

CSS

.todo-list{
    padding:20px;
    font-family: Arial;
    font-size:14px;
    color: #666;
}

.status-true {
  text-decoration: line-through;
  color: grey;
}
ul{
    position: relative;
    width: 260px;
    margin: 20px 0;
    padding:0;
    background: #FFF;
    border: 1px solid;
    border-color: #DFDCDC #D9D6D6 #CCC;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
ul li{
    position: relative;
    padding: 7px 15px;
    margin: 0;
    line-height: 21px;
    font-size: 12px;
    color: #8B8F97;
    list-style: none;
    border-bottom: 1px solid #E6EBED;
}
ul li:last{
    border:0;
}

input{
    padding: 5px;
}

input[type='text']{
    color: #333;
}

JavaScript

/* ------------------------------------------------------- 

* Filename:     ToDo list
* Website:      http://www.shanidkv.com
* Description:  Shanidkv AngularJS blog
* Author:       Muhammed Shanid shanidkannur@gmail.com

---------------------------------------------------------*/

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'HTML5', status:true},
    {text:'CSS3', status:false}];

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

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.status ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.status) $scope.todos.push(todo);
    });
  };
}