-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
189 lines (159 loc) · 5.77 KB
/
app.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
// UI Variables
const form = document.getElementById('add-item');
const itemInput = document.getElementById('newItem');
const search = document.getElementById('search');
const itemList = document.querySelector('.item-list');
const deleteAllBtn = document.querySelector('.btn-clear');
// Load all Event Listeners
function loadEventListeners() {
//DOM Load event
document.addEventListener('DOMContentLoaded', getItems);
// Add item event
form.addEventListener('submit', addItem);
// Remove item or mark as done event
itemList.addEventListener('click', controlItem);
// Delete All event
deleteAllBtn.addEventListener('click', deleteAll);
// Search event
search.addEventListener('keyup', searchList);
}
loadEventListeners();
// Get items from Local Storage
function getItems() {
let allItems;
if(localStorage.getItem('allItems') === null) {
allItems = [];
} else {
allItems = JSON.parse(localStorage.getItem('allItems'));
}
allItems.forEach(function(item) {
// Create li element
const li = document.createElement('li');
// Add class to li element
li.className = item[1] //'item-listed';
// Create p element
const itemText = document.createElement('p');
// Add text to p element
itemText.appendChild(document.createTextNode(item[0]));
// Append p element to li
li.appendChild(itemText);
// Create control buttons span element
const controls = document.createElement('span');
// Add class to span
controls.className = 'controls';
// Add controls html code (this seems lazy but oh well)
controls.innerHTML = '<a href="#" class="done"><i class="material-icons">done</i></a><a href="#" class="delete"><i class="material-icons">clear</i></a>';
// Append controls to li
li.appendChild(controls);
// Append li to ul
itemList.appendChild(li);
})
}
// Add Item to list
function addItem(e){
e.preventDefault();
if(itemInput.value === ''){
alert('Please write something first.');
return;
}
// Create li element
const li = document.createElement('li');
// Add class to li element
li.className = 'item-listed';
// Create p element
const itemText = document.createElement('p');
// Add text to p element
itemText.appendChild(document.createTextNode(itemInput.value));
// Append p element to li
li.appendChild(itemText);
// Create control buttons span element
const controls = document.createElement('span');
// Add class to span
controls.className = 'controls';
// Add controls html code (this seems lazy but oh well)
controls.innerHTML = '<a href="#" class="done"><i class="material-icons">done</i></a><a href="#" class="delete"><i class="material-icons">clear</i></a>';
// Append controls to li
li.appendChild(controls);
// Append li to ul
itemList.appendChild(li);
// Store item in Local Storage
storeItemInLocalStorage(itemInput.value);
// Clear input
itemInput.value = '';
}
// Store in Local Storage
function storeItemInLocalStorage(newItem) {
let allItems;
if(localStorage.getItem('allItems') === null) {
allItems = [];
} else {
allItems = JSON.parse(localStorage.getItem('allItems'));
}
allItems.push([newItem, 'item-listed']);
localStorage.setItem('allItems', JSON.stringify(allItems));
}
// Control (Remove/Mark) Item
function controlItem(e) {
if(e.target.parentElement.classList.contains('delete')) {
if(confirm('Are you sure?')) {
e.target.parentElement.parentElement.parentElement.remove();
// Remove Item from Local Storage
removeItemFromLocalStorage(e.target.parentElement.parentElement.parentElement);
}
} else if(e.target.parentElement.classList.contains('done') && e.target.parentElement.parentElement.parentElement.className === 'item-listed') {
e.target.parentElement.parentElement.parentElement.className = 'item-listed item-done';
updateItemClassFromLocalStorage(e.target.parentElement.parentElement.parentElement.firstChild.textContent, 'item-listed item-done')
} else if (e.target.parentElement.classList.contains('done') && e.target.parentElement.parentElement.parentElement.className === 'item-listed item-done') {
e.target.parentElement.parentElement.parentElement.className = 'item-listed';
updateItemClassFromLocalStorage(e.target.parentElement.parentElement.parentElement.firstChild.textContent, 'item-listed')
}
}
// Remove Item From Local Storage
function removeItemFromLocalStorage(listedItem) {
let allItems;
if(localStorage.getItem('allItems') === null) {
allItems = [];
} else {
allItems = JSON.parse(localStorage.getItem('allItems'));
}
// Grab only the p element inside the li
const listedItemP = listedItem.firstChild.textContent;
allItems.forEach(function(item, index) {
if(listedItemP === item[0]) {
allItems.splice(index, 1);
}
});
localStorage.setItem('allItems', JSON.stringify(allItems));
}
// Update class from item on local storage
function updateItemClassFromLocalStorage(pValue, cssClass){
let allItems = JSON.parse(localStorage.getItem('allItems'));
allItems.forEach(function(item, index) {
if(pValue === item[0]) {
item[1] = cssClass;
}
});
localStorage.setItem('allItems', JSON.stringify(allItems));
}
// Delete All
function deleteAll(e) {
if(confirm('Do you want to clear the list? This can\'t be undone.')) {
while(itemList.firstChild) {
itemList.removeChild(itemList.firstChild);
}
// Clear Local Storage
localStorage.clear();
}
}
// Search (filter) list
function searchList(e) {
const text = e.target.value.toLowerCase();
document.querySelectorAll('.item-listed').forEach(function(item) {
const itemListed = item.firstChild.textContent;
if(itemListed.toLowerCase().indexOf(text) != -1) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
}