Creating a To-Do List Application Using AngularJS and jQuery

Submitted by razormist on Friday, July 5, 2019 - 20:39.

In this tutorial we will create a To Do List Applicationr Using AngularJS. This code will list all your workflow when the user enters the textbox and submit. The code itself use AngularJS directives that can add list as an array by using dot notation push() and clear a list with the use of built-in dot notation filter() by just passing the item index key. The application uses the browser's local storage to store the data. This a user-friendly program feel free to modify and use in your system.

We will be using AngularJS as a framework which has additional custom HTML attributes embedded into it. It can interpret those attributes as directives to bind inputted parts of the page to a model that represents a standard JavaScript variable.

Getting Started:

First, you have to download Bootstrap, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/ and jQuery for some other functions. Also, this is the link for the AngularJS https://angularjs.org/.

Creating The Interface

This is where we will create a simple form for our application. To create the forms simply copy and write it into you text editor, then save it index.html.

<!DOCTYPE html>
<html lang="en" ng-app="myModule">
    <head>
        <title>To Do List</title>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <style>
            .finish{
                text-decoration: line-through;
                color:#ccc;
            }
            ul{
                list-style-type:none;
            }
            ul li{
                font-size:18px;
            }
        </style>
    </head>
<body ng-controller="myController">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
        </div>
    </nav>  
    <div class="col-md-3"></div>
    <div class="col-md-6 well">
        <h3 class="text-primary">JavaScript - To Do List Application Using AngularJS</h3>
        <hr style="border-top:1px dotted #ccc;"/>
        <div class="col-md-4">
            <form name="form" ng-submit="addList()">
                <div class="form-group">    
                    <input  class="form-control" type="text" placeholder="Enter list here..." ng-model="newlist" required="required" />
                </div>
                <center><button class="btn btn-primary" ng-disabled="form.$Invalid"><span class="glyphicon glyphicon-plus"></span> ADD</button></center>
            </form>
        </div>
        <div class="col-md-8">
            <button class="btn btn-danger pull-right" ng-click="clear()"><span class="glyphicon glyphicon-remove"></span> Clear List</button>
            <br /><br /><br />
            <ul>
                <li ng-repeat="list in lists">
                    <input class="chk" type="checkbox" ng-model="list.finish" />
                    <span ng-class="{finish:list.finish}">{{list.title}}</span>
                </li>
            </ul>
        </div>
    </div>  
<script src="js/angular.js"></script>
<script src="js/script.js"></script>    
</body>
</html>

Creating the Main Function

This code contains the main function of the application. This code will add some list when the button is clicked. To do this just copy and write these block of codes as shown below inside the text editor and save it as script.js inside the js directory.

var todos = [];
var app=angular.module('myModule', [])
                .controller('myController', ['$scope', function($scope){
                    if(typeof(Storage) !== "undefined") {
                        if (!localStorage.todos) {
                            todos = [
                                {title: 'Creating A Interface', finish: false},
                                {title: 'Creating A Database Model', finish: false},
                            ]
                            localStorage.todos = JSON.stringify(todos);
                        }else{
                            todos = JSON.parse(localStorage.todos)
                        }
                    }
                    $scope.lists = todos;
 
                    $scope.addList = function(){
                        $scope.lists.push({title: $scope.newlist, finish: false})
                        if(typeof(Storage) !== "undefined") {
                            if (localStorage.todos) {
                                var arr = []
                                var data = JSON.parse(localStorage.todos)
                                Object.keys(data).map(k=>{
                                    arr.push(data[k])
                                })
                                arr.push({title: $scope.newlist, finish: false})
                                localStorage.todos = JSON.stringify(arr);
                            }else{
                                localStorage.todos = JSON.stringify([{title: $scope.newlist, finish: false}])
                            }
                        }
                        $scope.newlist = "";
 
                        $('.chk').each(function(r){
                            $(this).change(function(){
                                if(typeof(Storage) !== "undefined") {
                                    if (localStorage.todos) {
                                        var arr = []
                                        var data = JSON.parse(localStorage.todos)
                                            data[r].finish = $(this).prop('checked');
                                        localStorage.todos = JSON.stringify(data);
                                    }
                                }
                            })
                        })
 
                    }
 
                    $scope.clear = function(){
                        $scope.lists = $scope.lists.filter(function(item){
                            return !item.finish;
                        });
                        localStorage.todos = JSON.stringify($scope.lists)
                    }   
                }])
$(document).ready(function(){
    $('.chk').each(function(r){
        $(this).change(function(){
            if(typeof(Storage) !== "undefined") {
                if (localStorage.todos) {
                    var arr = []
                    var data = JSON.parse(localStorage.todos)
                        data[r].finish = $(this).prop('checked');
                    localStorage.todos = JSON.stringify(data);
                }
            }
        })
    })
})

Demo

There you have it we successfully created a To Do List Application using AngularJS. I hope that this simple tutorial helps you to what you are looking for. For more updates and tutorials just kindly visit this site.

Enjoy Coding!!

Add new comment

250 views