/
Store.js
121 lines (111 loc) · 3.54 KB
/
Store.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
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
// import check from './check.js';
const todoList = document.querySelector('.task-list');
class Store {
// get the task
static getTask() {
let tasks;
// check if there is an item called task in local storage
if (localStorage.getItem('tasks') === null) {
tasks = [];
} else {
tasks = JSON.parse(localStorage.getItem('tasks'));
}
return tasks;
}
// add task to storage
static addTask(task) {
const tasks = Store.getTask();
tasks.push(task);
Store.save(tasks);
Store.displayTasks();
}
// Delete task from storage
static deleteTask = () => {
const tasks = Store.getTask();
const deleteBtn = document.getElementsByClassName('fa-trash');
for (let i = 0; i < deleteBtn.length; i += 1) {
deleteBtn[i].addEventListener('click', () => {
const filteredTask = tasks.filter((task) => task.index - 1 !== i);
filteredTask.forEach((task, index) => {
task.index = index + 1;
});
Store.save(filteredTask);
Store.displayTasks();
});
}
};
static clearTask = () => {
const tasks = Store.getTask();
const clearBtn = document.querySelector('.clear-button');
clearBtn.addEventListener('click', () => {
const filteredTask = tasks.filter((task) => task.completed !== true);
filteredTask.forEach((task, index) => {
task.index = index + 1;
});
Store.save(filteredTask);
Store.displayTasks();
});
};
static save(tasks) {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
static displayTasks = () => {
const tasks = Store.getTask();
todoList.innerHTML = '';
const sortedList = tasks.sort((a, b) => {
if (a.index > b.index) {
return 1;
}
if (a.index < b.index) {
return -1;
}
return 0;
});
sortedList.forEach((task) => {
Store.createTask(task);
});
Store.save(sortedList);
Store.check();
Store.deleteTask();
Store.clearTask();
};
static check = () => {
const tasks = Store.getTask();
const checkboxes = document.getElementsByClassName('check');
for (let i = 0; i < checkboxes.length; i += 1) {
checkboxes[i].addEventListener('change', () => {
if (tasks[i].completed === true) {
tasks[i].completed = false;
} else {
tasks[i].completed = true;
}
Store.save(tasks);
Store.displayTasks();
Store.check();
});
}
};
static createTask = (task) => {
let todoObj = '';
if (task.completed === true) {
todoObj = `
<li id="${task.index}" class="task-item" draggable="true">
<input class="check" type="checkbox" value="${task.completed}" checked>
<input type="text" id="${task.index}" class="task-text line-through" value="${task.description}" readonly>
<button><i id="" class="fas fa-ellipsis-v"></i></button>
<button class="btn"><i id="taskdelete" class="fas fa-trash"></i></button>
</li>`;
} else {
todoObj = `
<li id="${task.index}" class="task-item" draggable="true">
<input class="check" type="checkbox" value="${task.completed}">
<input type="text" id="${task.index}" class="task-text" value="${task.description}" readonly>
<button><i id="" class="fas fa-ellipsis-v"></i></button>
<button class="btn"><i id="taskdelete" class="fas fa-trash"></i></button>
</li>`;
}
todoList.innerHTML += todoObj;
Store.check();
};
}
export default Store;