To Do list App with Angular JS (Learn basic concepts of Angular JS)

Hello All,

Angular JS is really awesome framework created by Google, I learn just basic concepts of Angular JS from codeschool and able to create this application. This small application is a To Do list to keep track of your tasks. I created this for only running session, there is no permanent storage of tasks information.

The HTML code used for Tasks App:

        

            Total Tasks: {{TaskCtrl.taskCounter}}
            Tasks Pending: {{TaskCtrl.taskPendingCounter}}
            Tasks Done: {{TaskCtrl.taskDoneCounter}}
            

                Task title:
                

                Task description:
                
                

                
Add Task
            
            

            
        
    

In Angular JS we can have any number of template file which can be included any where in HTML code using "ng-include" directive of Angular JS, Template file for task "TaskTemplate.html" is as shown below:

    {{task.title}}: 
    {{task.description}}
    
Done?
    
    

JavaScript file to create controller for Tasks App is as shown below:

(function () {
    var TaskApp = angular.module("TaskApp", []);
    var Tasks = {
        TasksDetail: [
            {
                id: 1,
                title: "Sample Task 1",
                description: "GO for Aadhar card on Saturday",
                isDone: true
            },
            {
                id: 2,
                title: "Sample Tasks 2",
                description: "Go to shopping in InOrbit on Sunday to buy jeans",
                isDone: false
            }
        ],
        TaskStarted: "Today"
    };

    TaskApp.controller("TaskController", function () {
        this.tasks = Tasks.TasksDetail;
        this.addTask = function (taskTitle, taskDetail) {
            if (!!taskTitle) {
                var task = {
                    id: this.tasks.length + 1,
                    title: taskTitle,
                    description: taskDetail,
                    isDone:false
                }
                this.tasks.push(task);
                this.updateCounter();
                this.taskTitle = "";
                this.taskDesc = "";
            } else {
                alert("Enter title");
            }
        };
        this.removeTask = function (taskId) {
            if (confirm("Task will be deleted..!")) {
                this.tasks.splice(this.getTasksIndex(taskId), 1);
                this.updateCounter();
            }
        };
        this.doneTask = function (taskId,bFlag) {
            this.tasks[this.getTasksIndex(taskId)].isDone = bFlag;
            this.updateCounter();
        };

        this.getTasksIndex = function (taskId) {
            var index = 0;
            for (index = 0; index < this.tasks.length; index++) {
                if (this.tasks[index].id == taskId) {
                    return index;
                }
            }
            return -1;
        };
        this.getTasksCounter = function (isDoneFlag) {
            var counter = 0, index = 0;
            for (index = 0; index < this.tasks.length; index++) {
                if (this.tasks[index].isDone === isDoneFlag) {
                    counter++;
                }
            }
            return counter;
        };
        this.updateCounter = function () {
            this.taskPendingCounter = this.getTasksCounter(false);
            this.taskDoneCounter = this.getTasksCounter(true);
            this.taskCounter = Tasks.TasksDetail.length;
        };
        this.updateCounter();
    });
})();

You can use the app which I have hosted here, you can try to add new tasks, try to complete the taks and delete the tasks:

Style on app is from customized CSS file, you can update CSS properties to update UI/UX. My CSS file is as shown below:

body {
    background-color: #1ec885;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
}

#TaskForm {
    color: white;
}

.Box {
    width: 150px;
    height: 20px;
    display: inline-block;
    margin-top: 5px;
}

.InputTextBox {
    width: 100%;
    border-radius: 4px;
}

.InputTextBoxDescription {
    height: 35px;
}

.Button {
    text-align: center;
    cursor: pointer;
}

.ImageButton {
    vertical-align: middle;
}

.AddButton {
    background-color: #ff6a00;
    width: 200px;
    height: 30px;
    padding-top: 10px;
}

.RemoveButton {
    background-color: #961616;
    width: 20px;
    display: inline-block;
    height: 17px;
}

.DoneButton {
    background-color: #ff6a00;
    width: 50px;
}

#TaskFormTable {
    width: 100%;
}

.TaskItem {
    margin: 5px;
}

.TaskTitle {
    font-weight: 900;
}