-
Notifications
You must be signed in to change notification settings - Fork 0
/
todo.htm
92 lines (73 loc) · 3.26 KB
/
todo.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="todocss.css" />
<script>
var app = angular.module("myApp", []);
app.controller( "TodoCtrl",function($scope) {
$scope.formTodoText="";
$scope.formTodoDescription="";
$scope.todos = [
{"text":'SDC',"description":"Software Development Cell", "done":false},
{"text": 'Project',"description":"ToDo-List Using Angular Js 1.6x", "done":false}
];
$scope.getTotalTodos = function () {
return $scope.todos.length;
}
$scope.addTodo = function () {
if($scope.formTodoText==""||$scope.formTodoDescription=="")
{
alert("Title or Description field cannot be left blank");
}
else{
$scope.todos.push({text:$scope.formTodoText,description:$scope.formTodoDescription, done:false});
$scope.formTodoText = '';
$scope.formTodoDescription='';
}
}
$scope.clearCompleted = function () {
$scope.todos = $scope.todos.filter(function(todo){
return !todo.done;
});
}
$scope.desc=function(todoObject)
{
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
modal.style.display="block";
$scope.x=todoObject.description;
}
$scope.close=function()
{
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
modal.style.display="none";
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="TodoCtrl">
<div class="todo-wrapper" >
<div > <h2 style="background: #f4b042;width: 40%; transform: translate(50%,0);"><span class="big">{{getTotalTodos()}}</span> <br />Things to do</h2></div>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done"/>
<span ng-click="desc(todo)" class="done-{{todo.done}}">{{todo.text}}</span>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span ng-click="close(todo.text)"class="close">×</span>
<p>{{x}}</p>
</div>
</div>
</li>
</ul>
<form>
<input style="border: 2px solid black;"class="add-input" placeholder="Title" type="text" ng-model="formTodoText"value="" />
<input style="border: 2px solid black;"class="add-input" placeholder="Description" type="text" ng-model="formTodoDescription" />
<button class="add-btn" ng-click="addTodo()"><h2>Add</h2></button>
</form>
<button class="clear-btn" ng-click="clearCompleted()">Clear completed</button>
</div>
</body>
</html>