-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
106 lines (90 loc) · 3.28 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import './style.css';
import TodoList from './modules/tasks';
import toggleStatus from './modules/clear';
let todolist = [];
if (JSON.parse(localStorage.getItem('todolist'))) {
todolist = JSON.parse(localStorage.getItem('todolist')).todolist;
}
const newTodoList = new TodoList(todolist);
const todoItems = document.getElementsByClassName('to-do-list')[0];
const sortedTodoList = todolist.sort((a, b) => a.index - b.index);
sortedTodoList.forEach((todo) => {
const task = document.createElement('li');
// task.classList.add('task');
task.id = todo.index;
task.innerHTML = `<span class="task"><input type="checkbox" name="${todo.index}" class="check">
<label class = "${todo.index} task-desc black" for="${todo.index}">${todo.description}</label>
</span>
<div class="remove-button">
<i class='fa fa-trash ash'></i>
<div>`;
todoItems.appendChild(task);
});
const enter = document.querySelector('.enter');
const addTask = (e) => {
e.preventDefault();
const newItem = document.getElementById('data');
if (newItem.value) {
const description = newItem.value.trim();
const index = todolist.length + 1;
newTodoList.addTask(description, index);
localStorage.setItem('todolist', JSON.stringify(newTodoList));
newItem.value = '';
}
location.reload();
};
enter.addEventListener('click', addTask);
const editTaskButton = document.querySelectorAll('.task');
editTaskButton.forEach((elm) => {
const element = elm.children[1];
element.addEventListener('click', () => {
element.contentEditable = true;
element.focus();
});
element.addEventListener('focusout', () => {
if (element.innerHTML) {
newTodoList.editTask(element.innerHTML, element.className);
localStorage.setItem('todolist', JSON.stringify(newTodoList));
element.contentEditable = false;
}
});
element.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && element.innerHTML) {
newTodoList.editTask(element.innerHTML, element.className);
localStorage.setItem('todolist', JSON.stringify(newTodoList));
element.contentEditable = false;
}
});
});
const removeButton = document.querySelectorAll('.remove-button');
const removeTask = (e) => {
const index = e.target.parentNode.parentNode.id;
newTodoList.removeTask(index);
localStorage.setItem('todolist', JSON.stringify(newTodoList));
window.location.reload();
};
removeButton.forEach((element) => element.addEventListener('click', removeTask));
const checkBox = (e) => {
const i = e.target.name;
const task = newTodoList.getTaskByIndex(i);
toggleStatus(task);
newTodoList.todolist[i - 1] = task;
localStorage.setItem('todolist', JSON.stringify(newTodoList));
};
const tasks = document.querySelectorAll('.task');
tasks.forEach((e) => {
const checkInput = e.childNodes[0];
checkInput.addEventListener('change', checkBox);
});
const clearButton = document.getElementById('clear');
const clearCompleted = () => {
const filteredList = newTodoList.todolist.filter((e) => e.completed === false);
const sortedList = filteredList.map((object, i) => {
const index = i + 1;
return { ...object, index };
});
newTodoList.todolist = sortedList;
localStorage.setItem('todolist', JSON.stringify(newTodoList));
location.reload();
};
clearButton.addEventListener('click', clearCompleted);