-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
96 lines (84 loc) · 2.74 KB
/
script.js
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
(function() {
var addForm = document.querySelector("#formAddToDo");
var List = document.querySelector("ul#toDoList");
addForm.addEventListener("submit", function(e) {
e.preventDefault();
addTodo(List, this.elements.newToDo.value);
});
// fetch all todo from LS
var getToDos = function(List, event) {
if (localStorage.length) {
if (event == "initialLoad") {
for (var key in localStorage) {
appendToList(List, key);
}
} else {
// diff DOM and LS and update one change
}
} else {
console.info("You do not have any Todos!");
}
},
// toggle linethroug in DOM for the given id
toggleStrikeClass = function(id){
var el = document.querySelector(".t"+id +" span.checked");
if(!el){
var el = document.querySelector(".t"+id +" span.null");
el.className = "checked";
}
else{
el.className = "null";
}
},
getPriorityDom = function(priority){
var el = '';
for (var i=0; i<priority; i++){
el += '<span class="star">!</span>';
}
return el;
},
// add todo to DOM
appendToList = function(List, key) {
var todo = JSON.parse(localStorage.getItem(key)),
checked = todo.status == "done" ? "checked" : null,
priority = getPriorityDom(todo.priority);
List.innerHTML +=
'<li class=t'+
key+'><input '+checked+' type="checkbox" name="markDone" onclick= window.updateStatus('+key+')' +
'><div class="priority">'+priority+'</div><span class='+checked+'>'+todo.value +
'</span><input class="deleteTodo" type="button" value="delete" onclick="window.delete(' +
key +
')"></li>';
},
// add ToDo from both DOM and LS
addTodo = function(List, value) {
const maximumToDos = 1000,
key = Math.ceil(Math.random() * maximumToDos);
var toDo = {
value: value,
status: false,
priority: 2
};
localStorage.setItem(key, JSON.stringify(toDo));
appendToList(List, key);
},
// update ToDo from both DOM and LS
updateStatus = function(id) {
var todo = JSON.parse(localStorage.getItem(id));
status = todo.status;
todo.status = (status == "false") ? "done" : "false";
toggleStrikeClass(id);
localStorage.setItem(id, JSON.stringify(todo));
},
// delete ToDo from both DOM and LS
deleteTodo = function(id) {
var el = document.querySelector(".t"+id);
List.removeChild(el);
localStorage.removeItem(id);
};
// load all todos on initial load
getToDos(List, "initialLoad");
// expose limited functions to window scope
window.delete = deleteTodo;
window.updateStatus = updateStatus;
})();