-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
141 lines (123 loc) · 4.54 KB
/
script.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
const listsContainer = document.querySelector('[data-lists]')
const newListForm = document.querySelector('[data-new-list-form]')
const newListInput = document.querySelector('[data-new-list-input]')
const deleteListButton = document.querySelector('[data-delete-list-button]')
const listDisplayContainer = document.querySelector('[data-list-display-container]')
const listTitleElement = document.querySelector('[data-list-title]')
const listCountElement = document.querySelector('[data-list-count]')
const tasksContainer = document.querySelector('[data-tasks]')
const taskTemplate = document.getElementById('task-template')
const newTaskForm = document.querySelector('[data-new-task-form]')
const newTaskInput = document.querySelector('[data-new-task-input]')
const clearCompleteTasksButton = document.querySelector('[data-clear-complete-tasks-button]')
const LOCAL_STORAGE_LIST_KEY = 'task.lists'
const LOCAL_STORAGE_SELECTED_LIST_ID_KEY = 'task.selectedListId'
let lists = JSON.parse(localStorage.getItem(LOCAL_STORAGE_LIST_KEY)) || []
let selectedListId = localStorage.getItem(LOCAL_STORAGE_SELECTED_LIST_ID_KEY)
listsContainer.addEventListener('click', e => {
if (e.target.tagName.toLowerCase() === 'li') {
selectedListId = e.target.dataset.listId
saveAndRender()
}
})
tasksContainer.addEventListener('click', e => {
if (e.target.tagName.toLowerCase() === 'input') {
const selectedList = lists.find(list => list.id === selectedListId)
const selectedTask = selectedList.tasks.find(task => task.id === e.target.id)
selectedTask.complete = e.target.checked
save()
renderTaskCount(selectedList)
}
})
clearCompleteTasksButton.addEventListener('click', e => {
const selectedList = lists.find(list => list.id === selectedListId)
selectedList.tasks = selectedList.tasks.filter(task => !task.complete)
saveAndRender()
})
deleteListButton.addEventListener('click', e => {
lists = lists.filter(list => list.id !== selectedListId)
selectedListId = null
saveAndRender()
})
newListForm.addEventListener('submit', e => {
e.preventDefault()
const listName = newListInput.value
if (listName == null || listName === '') return
const list = createList(listName)
newListInput.value = null
lists.push(list)
saveAndRender()
})
newTaskForm.addEventListener('submit', e => {
e.preventDefault()
const taskName = newTaskInput.value
if (taskName == null || taskName === '') return
const task = createTask(taskName)
newTaskInput.value = null
const selectedList = lists.find(list => list.id === selectedListId)
selectedList.tasks.push(task)
saveAndRender()
})
function createList(name) {
return { id: Date.now().toString(), name: name, tasks: [] }
}
function createTask(name) {
return { id: Date.now().toString(), name: name, complete: false }
}
function saveAndRender() {
save()
render()
}
function save() {
localStorage.setItem(LOCAL_STORAGE_LIST_KEY, JSON.stringify(lists))
localStorage.setItem(LOCAL_STORAGE_SELECTED_LIST_ID_KEY, selectedListId)
}
function render() {
clearElement(listsContainer)
renderLists()
const selectedList = lists.find(list => list.id === selectedListId)
if (selectedListId == null) {
listDisplayContainer.style.display = 'none'
} else {
listDisplayContainer.style.display = ''
listTitleElement.innerText = selectedList.name
renderTaskCount(selectedList)
clearElement(tasksContainer)
renderTasks(selectedList)
}
}
function renderTasks(selectedList) {
selectedList.tasks.forEach(task => {
const taskElement = document.importNode(taskTemplate.content, true)
const checkbox = taskElement.querySelector('input')
checkbox.id = task.id
checkbox.checked = task.complete
const label = taskElement.querySelector('label')
label.htmlFor = task.id
label.append(task.name)
tasksContainer.appendChild(taskElement)
})
}
function renderTaskCount(selectedList) {
const incompleteTaskCount = selectedList.tasks.filter(task => !task.complete).length
const taskString = incompleteTaskCount === 1 ? "task" : "tasks"
listCountElement.innerText = `${incompleteTaskCount} ${taskString} remaining`
}
function renderLists() {
lists.forEach(list => {
const listElement = document.createElement('li')
listElement.dataset.listId = list.id
listElement.classList.add("list-name")
listElement.innerText = list.name
if (list.id === selectedListId) {
listElement.classList.add('active-list')
}
listsContainer.appendChild(listElement)
})
}
function clearElement(element) {
while (element.firstChild) {
element.removeChild(element.firstChild)
}
}
render()