July 9, 2024 08:07 by
PeterThere are multiple processes involved in creating a comprehensive AngularJS to-do list application. I'll walk you through every step of the process here, including adding, modifying, and removing jobs along with the relevant warnings and duplicate value checking.
A List of Tasks in AngularJS
Install the AngularJS application in step 1.
Make the index.html HTML file
<!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
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.
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.
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.