Post
Ask Question

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


Similar Articles