/
index.js
84 lines (71 loc) · 2.14 KB
/
index.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
import * as tk from './utility.js';
import './style.css';
const loadTask = document.querySelector('.todo-list');
const form = document.querySelector('.todo-form');
const clearList = document.querySelector('.clear');
let taskIndex = 0;
let taskDescription = '';
const taskCompleted = '';
const loadListElement = () => {
const li = document.createElement('li');
li.classList.add('task');
li.innerHTML = `<div class="form-check">
<input class="checkbox task-check" type="checkbox" ${taskCompleted}/>
<input class="desc todo-input" type="text" value= "${taskDescription}" id="${taskIndex}"/>
</div>`;
loadTask.append(li);
};
const displayBook = () => {
const tasks = tk.getLocalTasks();
tasks.forEach((task) => {
taskDescription = task.desc;
taskIndex = task.id;
loadListElement();
});
};
form.addEventListener('submit', (e) => {
const addDesc = document.querySelector('.todo-input').value;
e.preventDefault();
tk.addLocalTask(addDesc);
});
displayBook();
const checkBox = document.querySelectorAll('.checkbox');
checkBox.forEach((item) => {
item.addEventListener('click', () => {
const tasks = tk.getLocalTasks();
tasks.forEach((elem) => {
tk.completedStatus(elem, item);
localStorage.setItem('tasks', JSON.stringify(tasks));
});
});
});
const reLoad = () => {
const tasks = tk.getLocalTasks();
tasks.forEach((task) => {
task.completed = false;
localStorage.setItem('tasks', JSON.stringify(tasks));
});
};
reLoad();
clearList.addEventListener('click', () => {
let tasks = tk.getLocalTasks();
tasks = tasks.filter((elem) => elem.completed === false);
for (let j = 0; j < tasks.length; j += 1) {
tasks[j].id = j + 1;
}
reLoad();
document.location.reload();
localStorage.setItem('tasks', JSON.stringify(tasks));
});
const desc = document.querySelectorAll('.desc');
desc.forEach((description) => {
description.addEventListener('change', (e) => {
const tasks = tk.getLocalTasks();
tasks.forEach((item) => {
if (item.id === parseInt(e.target.id, 10)) {
item.desc = description.value;
}
});
localStorage.setItem('tasks', JSON.stringify(tasks));
});
});