Angular

How To Create a To-Do List in AngularJS

Creating a complete To-Do list application in AngularJS involves several steps. Here, I'll guide you through each step, including adding, editing, and deleting tasks with appropriate alerts and duplicate value checking.

To-Do List in AngularJS

Step 1. Set Up the AngularJS Application.

Create the HTML file (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS To-Do List</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="todoApp" ng-controller="todoController">
    <div class="container">
        <h1>To-Do List</h1>
        <div class="input-group">
            <input type="text" ng-model="newTask" placeholder="Add a new task" class="form-control">
            <button ng-click="addTask()" class="btn btn-primary">Add Task</button>
        </div>
        <div ng-if="alertMessage" class="alert" ng-class="{'alert-success': alertType=='success', 'alert-danger': alertType=='danger'}">
            {{ alertMessage }}
        </div>
        <ul class="list-group">
            <li ng-repeat="task in tasks" class="list-group-item">
                <span ng-if="!task.editing">{{ task.name }}</span>
                <input type="text" ng-if="task.editing" ng-model="task.name" class="form-control">
                <button ng-if="!task.editing" ng-click="editTask(task)" class="btn btn-warning btn-sm">Edit</button>
                <button ng-if="task.editing" ng-click="saveTask(task)" class="btn btn-success btn-sm">Save</button>
                <button ng-click="deleteTask(task)" class="btn btn-danger btn-sm">Delete</button>
            </li>
        </ul>
    </div>
</body>
</html>

Create the AngularJS file (app.js)

var app = angular.module('todoApp', []);
app.controller('todoController', function($scope) {
    $scope.tasks = [];
    $scope.alertMessage = '';
    $scope.alertType = '';
    $scope.addTask = function() {
        if (!$scope.newTask) {
            $scope.showAlert('Task cannot be empty', 'danger');
            return;
        }
        if ($scope.tasks.some(task => task.name === $scope.newTask)) {
            $scope.showAlert('Task already exists', 'danger');
            return;
        }
        $scope.tasks.push({ name: $scope.newTask, editing: false });
        $scope.newTask = '';
        $scope.showAlert('Task added successfully', 'success');
    };
    $scope.editTask = function(task) {
        task.editing = true;
    };
    $scope.saveTask = function(task) {
        if (!$scope.tasks.some(t => t !== task && t.name === task.name)) {
            task.editing = false;
            $scope.showAlert('Task edited successfully', 'success');
        } else {
            $scope.showAlert('Duplicate task name', 'danger');
        }
    };
    $scope.deleteTask = function(task) {
        var index = $scope.tasks.indexOf(task);
        if (index > -1) {
            $scope.tasks.splice(index, 1);
            $scope.showAlert('Task deleted successfully', 'success');
        }
    };
    $scope.showAlert = function(message, type) {
        $scope.alertMessage = message;
        $scope.alertType = type;
        setTimeout(function() {
            $scope.$apply(function() {
                $scope.alertMessage = '';
            });
        }, 3000);
    };
});

Create a CSS file (styles.css) for styling

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
.container {
    max-width: 600px;
    margin: auto;
}
.input-group {
    display: flex;
    margin-bottom: 20px;
}
.form-control {
    flex: 1;
    padding: 10px;
    font-size: 16px;
}
.btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
.list-group {
    list-style-type: none;
    padding: 0;
}
.list-group-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f9f9f9;
    margin-bottom: 5px;
    border: 1px solid #ddd;
}
.alert {
    padding: 10px;
    margin-bottom: 20px;
}
.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}
.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

Explanation of the Code

  1. HTML Structure
    • The HTML file sets up the structure of the To-Do list application.
    • It includes an input field for new tasks, a button to add tasks, and a list to display tasks.
    • Each task can be edited or deleted.
  2. AngularJS Controller (app.js)
    • The todoController manages the tasks array and handles adding, editing, and deleting tasks.
    • The addTask function checks for duplicate tasks and alerts the user if a task already exists.
    • The editTask function enables editing mode for a task.
    • The saveTask function saves the edited task and checks for duplicate names.
    • The deleteTask function removes a task from the list.
    • The showAlert function displays an alert message for 3 seconds.
  3. Styling (styles.css)
    • The CSS file styles the To-Do list application, including the input field, buttons, list items, and alert messages.

By following these steps, you can create a fully functional To-Do list application in AngularJS with features like adding, editing, deleting tasks, and handling duplicate tasks with appropriate alerts.

AngularJS

List

TODO List

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found