Created
January 31, 2025 22:55
-
-
Save allanminium/86d11a886eb0894ae620096f011c157d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" ng-app="taskManager"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Task Manager</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 20px; } | |
| .task-done { text-decoration: line-through; color: gray; } | |
| .list-container { margin-bottom: 20px; } | |
| </style> | |
| </head> | |
| <body ng-controller="TaskController"> | |
| <h2>Task Manager</h2> | |
| <input type="text" ng-model="newListName" placeholder="New List Name"> | |
| <button ng-click="addList()">Add List</button> | |
| <div ng-repeat="list in lists" class="list-container"> | |
| <h3> | |
| {{ list.name }} | |
| <button ng-click="renameList(list)">Rename</button> | |
| <button ng-click="deleteList($index)">Delete</button> | |
| </h3> | |
| <input type="text" ng-model="newTaskName" placeholder="Task Name"> | |
| <input type="date" ng-model="newTaskDueDate"> | |
| <input type="text" ng-model="newTaskNote" placeholder="Task Note"> | |
| <button ng-click="addTask(list, newTaskName, newTaskDueDate, newTaskNote)">Add Task</button> | |
| <ul> | |
| <li ng-repeat="task in list.tasks"> | |
| <input type="checkbox" ng-model="task.completed" ng-change="toggleTask(task)"> | |
| <span ng-class="{'task-done': task.completed}">{{ task.name }} (Due: {{ task.dueDate || 'N/A' }})</span> | |
| <button ng-click="removeTask(list, $index)">Remove</button> | |
| <p ng-if="task.note">Note: {{ task.note }}</p> | |
| </li> | |
| </ul> | |
| <button ng-click="clearCompleted(list)">Clear Completed</button> | |
| </div> | |
| <script> | |
| var app = angular.module('taskManager', []); | |
| app.controller('TaskController', function($scope) { | |
| $scope.lists = JSON.parse(localStorage.getItem('taskLists')) || []; | |
| $scope.newListName = ''; | |
| $scope.showCompleted = true; | |
| $scope.addList = function() { | |
| if ($scope.newListName.trim() !== '') { | |
| $scope.lists.push({ name: $scope.newListName, tasks: [] }); | |
| $scope.newListName = ''; | |
| $scope.saveLists(); | |
| } | |
| }; | |
| $scope.renameList = function(list) { | |
| var newName = prompt("Rename list:", list.name); | |
| if (newName !== null && newName.trim() !== '') { | |
| list.name = newName; | |
| $scope.saveLists(); | |
| } | |
| }; | |
| $scope.deleteList = function(index) { | |
| if (confirm("Are you sure you want to delete this list?")) { | |
| $scope.lists.splice(index, 1); | |
| $scope.saveLists(); | |
| } | |
| }; | |
| $scope.addTask = function(list, taskName, taskDueDate, taskNote) { | |
| if (taskName.trim() !== '') { | |
| list.tasks.push({ name: taskName, completed: false, dueDate: taskDueDate || '', note: taskNote || '' }); | |
| $scope.saveLists(); | |
| } | |
| }; | |
| $scope.toggleTask = function(task) { | |
| task.completed = !task.completed; | |
| $scope.saveLists(); | |
| }; | |
| $scope.removeTask = function(list, index) { | |
| if (confirm("Are you sure you want to delete this task?")) { | |
| list.tasks.splice(index, 1); | |
| $scope.saveLists(); | |
| } | |
| }; | |
| $scope.saveLists = function() { | |
| localStorage.setItem('taskLists', JSON.stringify($scope.lists)); | |
| }; | |
| $scope.clearCompleted = function(list) { | |
| list.tasks = list.tasks.filter(task => !task.completed); | |
| $scope.saveLists(); | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment