-
Notifications
You must be signed in to change notification settings - Fork 1
/
crud.js
148 lines (138 loc) · 4.27 KB
/
crud.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import { storeData, getData, completeTask } from './complete.js';
const unorderedList = document.querySelector('#unordered');
const storeEdit = () => {
const events = document.querySelectorAll('.event');
const count = document.querySelectorAll('.lists');
const list = getData();
let position;
count.forEach((element, index) => {
element.addEventListener('click', () => {
position = index;
});
});
events.forEach((element) => {
element.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
const edits = element.value;
if (edits === '') {
const par = element.parentNode.parentNode;
par.innerHTML = '';
par.innerHTML = `
<input type="checkbox" class="point check">
<span class="listmarg">${list[position].description}</span></span>
<span class="icondelete"><i aria-hidden="true" class="fa fa-ellipsis-v move"></i>
</span>`;
// eslint-disable-next-line no-use-before-define
editElement();
} else {
const obj = {};
obj.index = position;
obj.description = edits;
obj.completed = false;
list.splice(position, 1, obj);
storeData(list);
// eslint-disable-next-line no-use-before-define
createList();
}
}
});
});
};
const editElement = () => {
const listElement = document.querySelectorAll('.listmarg');
const list = getData();
listElement.forEach((element, index) => {
element.addEventListener('click', () => {
const parents = element.parentNode.parentNode;
parents.innerHTML = '';
parents.innerHTML = `
<span class="del"><span class='heights'>
<input type="checkbox" class="point check">
<input type="text" class="edit event" placeholder="${list[index].description}">
</span>
<span class="icondelete"><i class="fa fa-trash-o point" aria-hidden="true" onclick='deleteItem()'></i>
</span></span>
`;
storeEdit();
});
});
};
const createList = () => {
const listMess = document.querySelector('#noth');
unorderedList.innerHTML = '';
const list = getData();
if (list.length === 0) {
listMess.innerHTML = '<p id="emptylist">You do not have any tasks</p>';
} else {
listMess.innerHTML = '';
list.forEach((item) => {
if (item.completed === true) {
unorderedList.innerHTML += `
<li class="lists"><span class="height">
<input type="checkbox" class="point check" checked>
<span class="listmarg canceltext">${item.description}</span></span>
<span class="icondelete"><i aria-hidden="true" class="fa fa-ellipsis-v move"></i>
</span>
</li>
`;
} else {
unorderedList.innerHTML += `
<li class="lists"><span class="height">
<input type="checkbox" class="point check">
<span class="listmarg">${item.description}</span></span>
<span class="icondelete"><i aria-hidden="true" class="fa fa-ellipsis-v move"></i>
</span>
</li>
`;
}
});
}
editElement();
completeTask();
};
const clearComplete = () => {
const removeComplete = document.querySelector('#comp');
removeComplete.addEventListener('click', () => {
let list = getData();
list = list.filter((element) => element.completed === false);
list.forEach((item, index) => {
item.index = index;
});
storeData(list);
createList();
});
};
const add = (input) => {
const addObj = {};
const list = getData();
if (list.length === 0) {
addObj.index = 0;
} else {
addObj.index = list.length;
}
addObj.description = input;
addObj.completed = false;
list.push(addObj);
storeData(list);
unorderedList.innerHTML = '';
createList();
};
window.deleteItem = () => {
const deleteElement = document.querySelectorAll('.icondelete');
deleteElement.forEach((element, index) => {
element.addEventListener('click', () => {
if (element.innerHTML === '<i class="fa fa-trash-o point" aria-hidden="true"></i>') {
return;
}
const list = getData();
list.splice(index, 1);
list.forEach((item, index) => {
item.index = index;
});
storeData(list);
createList();
});
});
};
export default add;
export { createList, clearComplete };