JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body ng-app="todoApp">
    <div class="container">
        <div class="col-md-8 offset-2" ng-controller="MainCtrl">
            <h1 class="center">TodoList</h1>
            <form class="add-form" name="todoForm" ng-submit="addItem()">
                <div class="form-group">
                    <label>What you want todo?</label>
                    <input type="text" name="task" class="form-control" ng-model="task.name" placeholder="Put something..." required="required" />
                    <br/>
                    <button class="btn btn-block btn-success" ng-disabled="todoForm.$invalid">Add Task</button>
                </div>
            </form>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="progress.total" style="width: {{progress.getProgress()}}">
                    <span class="sr-only">60% Complete</span>
                </div>
            </div>
          <ul class="list-container">
              <li ng-repeat="task in todoList" ng-class="{'completed': task.completed}">
                  <input type="checkbox" ng-model="task.completed" />{{task.name}}
              </li>
          </ul>
          <button class="btn btn-block btn-danger" ng-click="deleteTasks()">Delete Completed Tasks</button>
        </div>
    </div>
</body>

CSS

body {
    background: #eee;
    color: #333;
}
h1{
    text-transform: uppercase;
    color: #ddd;
    text-shadow: 2px 2px 0 #ccc;
}
.container{
    margin-bottom:20px;
}
.center{
    text-align: center;
}
.add-form, .list-container{
    background: #fff;
    padding:20px;
}
.list-container{
    margin: 20px 0;
    padding: 0;
}
.list-container li{
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
    list-style: none;
}
.list-container li:last-child{
    border: none;
}
.list-container input{
    margin: 5px 10px;
}
.completed{
    text-decoration: line-through;
    font-size:.8em;
    color: #999;
}

.progress{
    max-height: 10px;
    margin:20px 0 0;
}

JavaScript

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

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.todoList = [
        {name: 'Learn Angular', completed: false},
        {name: 'Build a TodoList', completed: true}
    ];
    
    function Task(){
        this.name = '';
        this.completed = false;
    }
    
    function updateProgress() {
        $scope.progress = {
            total: $scope.todoList.length,
            getProgress: function() {
                var complete = 0;
                $scope.todoList.forEach(function(item){
                    if (item.completed) {
                        complete++;
                    }
                });
                return (complete * 100) / this.total + '%';
            }
        }
    }
    
    $scope.task = new Task();
    
    $scope.addItem = function () {
        $scope.todoList.push($scope.task);
        $scope.task = new Task();
        updateProgress();
    }
    
    $scope.deleteTasks = function() {
        var newList = [];
        $scope.todoList.forEach(function(item) {
            if (!item.completed) {
                newList.push(item);
            }
        });
        
        $scope.todoList = newList;
        updateProgress();
    }
    
    updateProgress();
}]);