-
Notifications
You must be signed in to change notification settings - Fork 0
/
displayList.js
81 lines (71 loc) · 2.64 KB
/
displayList.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
import retrieveFromStore from './retrieveFromStore.js';
import selectItem from './selectItem.js';
import deleteItem from './deleteItem.js';
import listStore from './listStore.js';
// eslint-disable-next-line import/no-cycle
import clear from './clear.js';
const displayList = () => {
const todoList = document.querySelector('.todo-list-items');
const welcomeMessageContainer = document.querySelector('.welcome-msg');
welcomeMessageContainer.innerHTML = '';
todoList.innerHTML = '';
const renderTodo = () => retrieveFromStore().forEach((item) => {
const listItem = document.createElement('div');
listItem.classList.add('list-div');
listItem.setAttribute('id', `list-${item.index}`);
const todoItem = document.createElement('input');
todoItem.type = 'text';
todoItem.classList.add('list-item');
todoItem.setAttribute('id', `input-${item.index}`);
const checkbox = document.createElement('input');
checkbox.classList.add('checkbox-item');
checkbox.type = 'checkbox';
checkbox.setAttribute('id', `${item.index}`);
const deleteButton = document.createElement('i');
deleteButton.classList.add('fa-solid');
deleteButton.classList.add('fa-trash-can');
deleteButton.setAttribute('id', `btn-${item.index}`);
deleteButton.style.display = 'none';
listItem.appendChild(checkbox);
listItem.appendChild(todoItem);
listItem.appendChild(deleteButton);
todoItem.value = item.description;
todoList.appendChild(listItem);
// check if checkbox is checked or not and change state
checkbox.addEventListener('change', () => {
const isChecked = checkbox.checked;
if (isChecked) {
todoItem.style.textDecoration = 'line-through';
} else {
todoItem.style.textDecoration = 'none';
}
selectItem(item.index);
});
// delete or remove item
deleteButton.addEventListener('click', () => {
deleteItem(item.index);
});
// show the delete button on onBlur of the list item
todoItem.addEventListener('focus', () => {
deleteButton.style.display = 'block';
});
// edit task
todoItem.addEventListener('change', () => {
const todoTasks = retrieveFromStore();
const editTask = document.getElementById(`input-${item.index}`);
todoTasks.forEach((todoItem) => {
if (todoItem.index === item.index) {
todoItem.description = editTask.value;
}
});
listStore(todoTasks);
});
// clear all tasks
const clearButton = document.querySelector('.clear-all');
clearButton.addEventListener('click', () => {
clear();
});
});
renderTodo();
};
export default displayList;