-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
65 lines (59 loc) · 2.04 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
const todoList = document.querySelector('#todo-list');
const todoForm = document.querySelector('#todo-form');
// generate unique id for todos by incrementing counter for new todos
let uniqueTodoId = parseInt(localStorage.getItem('uniqueTodoId')) || 1;
// restore todos for storage and append to html
let cachedTodos = JSON.parse(localStorage.getItem('savedTodos')) || [];
if (cachedTodos.length > 0) {
for (let todo of cachedTodos) {
createLi(todo.id, todo.text, todo.done);
}
}
// submit listener
todoForm.addEventListener('submit', function(e) {
let text = document.querySelector('#new-item').value;
e.preventDefault();
createLi(uniqueTodoId, text, false);
cachedTodos.push({
'id': uniqueTodoId,
'text': text,
'done': false
});
todoForm.reset();
localStorage.setItem('uniqueTodoId', uniqueTodoId++);
localStorage.setItem('savedTodos', JSON.stringify(cachedTodos));
})
todoList.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
e.target.classList.toggle('done');
// finds todo in cache
let todo = cachedTodos.find(function(key, index) {
if (parseInt(key.id) === parseInt(e.target.dataset.id)) {
return true;
}
});
todo.done = todo.done ? false : true;
} else if (e.target.tagName === 'BUTTON') {
e.target.parentElement.remove();
// finds todo in cache
let todo = cachedTodos.findIndex(function(key, index) {
if (parseInt(key.id) === parseInt(e.target.parentElement.dataset.id)) {
return true;
}
});
cachedTodos.splice(todo, 1);
}
localStorage.setItem('savedTodos', JSON.stringify(cachedTodos));
})
function createLi(id, text, done) {
let li = document.createElement('li');
let button = document.createElement('button');
li.dataset.id = id;
li.innerText = text;
if (done) {
li.classList.add('done');
}
button.innerText = 'x';
li.append(button);
todoList.append(li);
}