-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (104 loc) · 5.01 KB
/
index.html
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="nextflix-logo.png" type="image/x-icon">
<link rel="manifest" href="manifest.json">
<!-- Bootstrap CDN -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
<!-- AngularJS CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.js"></script>
<!-- ngNotify CDN -->
<script src="https://cdn.jsdelivr.net/angular.ng-notify/0.8.0/ng-notify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.ng-notify/0.8.0/ng-notify.min.css">
<!-- FontAwesome CDN -->
<script src="https://kit.fontawesome.com/cd294b5c2b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/main.css">
<title>nextFlix</title>
</head>
<body ng-app="App">
<header class="header">
<h1>nextFlix</h1><i class="fas fa-play"></i>
</header>
<h3>Plan your movies-night ahead!</h3>
<main ng-controller="TodoController">
<!-- Handle User Input / add items to list -->
<form class="newTaskForm">
<input class="newTaskForm__input" type="text"
ng-model="inputText" ng-required="required"
placeholder="Type a movie title..." />
<button class="newTaskForm__addBtn"
ng-click="addItem()" title="Add a new task">
<i class="fas fa-plus"></i>
</button>
</form>
<ul class="todos-list">
<!-- render list from $scope.todos array -->
<li ng-repeat="todo in todos | orderBy:groupDone" class="item">
<!-- custom checkbox -->
<label class="item__checkbox__container" ng-if="todo.editing === false">
<input class="item__checkbox" type="checkbox" ng-model="todo.done" ng-click="toggleDone()"/>
<span class="item__checkmark"></span>
</label>
<!-- render user input / list item -->
<span class="item__taskName {{todo.done ? 'done' : ''}}"
ng-if="todo.editing === false"
ng-dblclick="toggleEdit(todo)">
{{ todo.text }}
</span>
<!-- conditional rendering to edit item's input -->
<form class="item__editTaskForm" ng-if="todo.editing === true" ng-submit="saveEdit(todo)">
<input class="item__editTaskForm__editInput" id="editInput" type="text"
ng-model="todo.newText" ng-init="setFocus()" ng-blur="saveEdit(todo)"/>
<button class="item__editTaskForm__saveBtn" title="Save Changes">
<i class="fas fa-save"></i>
</button>
</form>
<!-- btn for toggling edit mode -->
<button class="item__editBtn" title="Edit Title"
ng-click="toggleEdit(todo)" ng-hide="todo.editing === true">
<i class="fas fa-pen"></i>
</button>
<button class="item__cancelBtn" title="Cancel Edit"
ng-click="toggleEdit(todo)" ng-show="todo.editing === true">
<i class="fas fa-times"></i>
</button>
<!-- remove item btn -->
<button class="item__removeBtn" ng-click="deleteItem()" title="Remove Movie"
ng-if="todo.editing === false">
<i class="fas fa-trash"></i>
</button>
</li>
</ul>
<!-- options to modify items list -->
<div class="listModifiers">
<div class="orderItems">
<!-- order function passed to ng-repeat's orderBy -->
<button ng-click="orderByDone('done')" title="Send already watched to bottom of list"><i class="fas fa-layer-group"></i>Group Completed</button>
</div>
<div class="moreActions">
<button class="moreActions__deleteCompletedBtn" ng-click="clearCompleted()" title="Delete completed tasks">
<i class="fas fa-trash-alt"></i>Completed Tasks
</button>
<button class="moreActions__deleteAllBtn" ng-click="deleteAll()" title="Clear list"><i class="fas fa-trash-alt"></i>All</button>
</div>
</div>
<!-- display list status info -->
<div class="tasksStatus">
<h3 ng-if="todos.length === 0">No movies added yet...</h3>
<h3 ng-if="completed() !== todos.length">Movies watched: {{ completed() }} of {{ todos.length }}</h3>
<h3 ng-if="todos.length > 0 && completed() === todos.length" class="taksCompletedStatus">You're all out of popcorn!</h3>
</div>
</main>
<!-- <footer>
<p class="front">powered by <img src="https://angularjs.org/img/AngularJS-large.png" alt="angularjs logo"></p>
<p class="back">created by <a href="https://github.com/pablowbk">pablowbk</a></p>
</footer> -->
<script src="./js/app.js"></script>
<!-- Controllers -->
<script src="./js/controllers/TodoController.js"></script>
</body>
</html>