masudiiuc/app.js

## app.js
'use strict';

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

todoAppliction.controller("todoController", todoController);
todoController.$inject =['$scope'];

/**
 * Processs an input box enter event
 * Ex: on enter add the task in the list
 */
todoAppliction.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter, {'event': event});
                });

                event.preventDefault();
            }
        });
    };
});


/**
 * Manage todolist functionality
 */
function todoController($scope){

    $scope.todoList = [];
    $scope.isValid = true;
    $scope.totalCompleted = 0;
    $scope.totalInCompleted = 0;
    $scope.filterBy = 'all';


    $scope.addTodoItem = addTodoItem;
    $scope.removeTodoItem = removeTodoItem;
    $scope.getStatus =  getStatus;


    function addTodoItem(){
		$scope.isValid = isValid();
        if(!$scope.isValid) {
            return false;
        }

    	$scope.todoList.push({
        	id: 'id_' + (new Date()).getTime(),
            name: $scope.task_title,
            completed: false,
            createdDate: (new Date())
        });

        $scope.task_title = '';
    }

    function removeTodoItem(index) {
    	$scope.todoList.splice(index,1);
    }

    function isValid() {
    	return ($scope.task_title != null && $scope.task_title != undefined && $scope.task_title != "")
    }

    function getStatus(isComplete){
        var count = 0;
    	angular.forEach($scope.todoList, function(item){
			if (isComplete && item.completed) {
                count++;
            }else if (!isComplete && !item.completed) {
                count++;
            }
        })
        return count;
    }

}

## index.html
<body>
    <div ng-app="todoApp" ng-controller="todoController">
        <div class="task-input">
            <input type="text" ng-enter="addTodoItem()" id="task-input-box" placeholder="enter task title" ng-model="task_title"/>
            <button type="button" name="add-task" id="add-task" class="button" ng-click="addTodoItem()">
                + Add
            </button>
            <br/>
            <div class="error-mg" ng-show="!isValid">Please enter a title</div>

            <div id="filterOptions">

                <input type='radio' ng-model="filterBy" value="all"/> All ({{todoList.length}})
                    <input type='radio' ng-model="filterBy" value="complete"/> Complete ({{getStatus(true)}})
                        <input type='radio' ng-model="filterBy" value="incomplete"/> Incomplete ({{getStatus(false)}})

            </div>
        </div>


        <div class="todo-list">
            <ul>
                <li ng-repeat="todo in todoList track by todo.id"
                    ng-show="(filterBy=='all') || (filterBy=='incomplete' && !todo.completed) || (filterBy=='complete' && todo.completed)"
                >
                    <input type="checkbox" ng-model="todo.completed"/>
                    <span ng-class="todo.completed ? 'complete': 'incomplete'">{{todo.name}} </span>
                    <a href="#" ng-click="removeTodoItem($index)">remove</a>
                </li>
            </ul>
        </div>

    </div>
</body>

## style.css
.task-input{
    padding: 10px;
    background-color: #4072B4;
    color:white;
    font-family:verdana;
    font-size: 12px;
}

.task-input input[type=text]{
    border: 1px solid white;
    padding: 10px;
    font-size: 15px;
    border-radius: 3px;
    width: 280px;
}

.button{
    padding: 11px 15px;
    font-size: 13px;
    border-radius: 3px;
    border: 1px solid white;
    background-color: #3267C6;
    color:white;
}

.error-mg{
    color:red;
    font-size:12px;
    text-align:left;
}

.complete{
    text-decoration:line-through;
    color:#999;
}

.todo-list{
    margin: 15px 0px;
}

.todo-list ul{
    padding:0;
    margin:0;
}

.todo-list ul li{
    list-style:none;
    padding: 0;
}

.todo-list ul li span{
    width: 320px;
    display:inline-block;
    vertical-align:top;
}

#filterOptions{
    margin: 10px 0px;
}
	'use strict';

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

	todoAppliction.controller("todoController", todoController);
	todoController.$inject =['$scope'];

	/**
	* Processs an input box enter event
	* Ex: on enter add the task in the list
	*/
	todoAppliction.directive('ngEnter', function() {
	return function(scope, element, attrs) {
	element.bind("keydown keypress", function(event) {
	if(event.which === 13) {
	scope.$apply(function(){
	scope.$eval(attrs.ngEnter, {'event': event});
	});

	event.preventDefault();
	}
	});
	};
	});


	/**
	* Manage todolist functionality
	*/
	function todoController($scope){

	$scope.todoList = [];
	$scope.isValid = true;
	$scope.totalCompleted = 0;
	$scope.totalInCompleted = 0;
	$scope.filterBy = 'all';


	$scope.addTodoItem = addTodoItem;
	$scope.removeTodoItem = removeTodoItem;
	$scope.getStatus = getStatus;


	function addTodoItem(){
	$scope.isValid = isValid();
	if(!$scope.isValid) {
	return false;
	}

	$scope.todoList.push({
	id: 'id_' + (new Date()).getTime(),
	name: $scope.task_title,
	completed: false,
	createdDate: (new Date())
	});

	$scope.task_title = '';
	}

	function removeTodoItem(index) {
	$scope.todoList.splice(index,1);
	}

	function isValid() {
	return ($scope.task_title != null && $scope.task_title != undefined && $scope.task_title != "")
	}

	function getStatus(isComplete){
	var count = 0;
	angular.forEach($scope.todoList, function(item){
	if (isComplete && item.completed) {
	count++;
	}else if (!isComplete && !item.completed) {
	count++;
	}
	})
	return count;
	}

	}
	<body>
	<div ng-app="todoApp" ng-controller="todoController">
	<div class="task-input">
	<input type="text" ng-enter="addTodoItem()" id="task-input-box" placeholder="enter task title" ng-model="task_title"/>
	<button type="button" name="add-task" id="add-task" class="button" ng-click="addTodoItem()">
	+ Add
	</button>
	<br/>
	<div class="error-mg" ng-show="!isValid">Please enter a title</div>

	<div id="filterOptions">

	<input type='radio' ng-model="filterBy" value="all"/> All ({{todoList.length}})
	<input type='radio' ng-model="filterBy" value="complete"/> Complete ({{getStatus(true)}})
	<input type='radio' ng-model="filterBy" value="incomplete"/> Incomplete ({{getStatus(false)}})

	</div>
	</div>


	<div class="todo-list">
	<ul>
	<li ng-repeat="todo in todoList track by todo.id"
	ng-show="(filterBy=='all') \|\| (filterBy=='incomplete' && !todo.completed) \|\| (filterBy=='complete' && todo.completed)"
	>
	<input type="checkbox" ng-model="todo.completed"/>
	<span ng-class="todo.completed ? 'complete': 'incomplete'">{{todo.name}} </span>
	<a href="#" ng-click="removeTodoItem($index)">remove</a>
	</li>
	</ul>
	</div>

	</div>
	</body>
	.task-input{
	padding: 10px;
	background-color: #4072B4;
	color:white;
	font-family:verdana;
	font-size: 12px;
	}

	.task-input input[type=text]{
	border: 1px solid white;
	padding: 10px;
	font-size: 15px;
	border-radius: 3px;
	width: 280px;
	}

	.button{
	padding: 11px 15px;
	font-size: 13px;
	border-radius: 3px;
	border: 1px solid white;
	background-color: #3267C6;
	color:white;
	}

	.error-mg{
	color:red;
	font-size:12px;
	text-align:left;
	}

	.complete{
	text-decoration:line-through;
	color:#999;
	}

	.todo-list{
	margin: 15px 0px;
	}

	.todo-list ul{
	padding:0;
	margin:0;
	}

	.todo-list ul li{
	list-style:none;
	padding: 0;
	}

	.todo-list ul li span{
	width: 320px;
	display:inline-block;
	vertical-align:top;
	}

	#filterOptions{
	margin: 10px 0px;
	}