forked from uriyang/Functional-JavaScript-Todo
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.js
More file actions
145 lines (116 loc) · 4.32 KB
/
index.js
File metadata and controls
145 lines (116 loc) · 4.32 KB
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
//Problem: user interaction doesn't provide desired results
//Solution: add interactivity so the user can manage daily tasks.
var taskInput = document.getElementById("new-task"); // new-task
var addButton = document.getElementsByTagName("button")[0];//first button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks
//New Task List item
var createNewTaskElement = function(taskString) {
// create List Item
var listItem = document.createElement("li");
// input checkbox
var checkBox = document.createElement("input");
// label
var label = document.createElement("label");
// input (text)
var editInput = document.createElement("input");
// button.edit
var editButton = document.createElement("button");
// button.delete
var deleteButton = document.createElement("button");
//Each element needs modified
checkBox.type = "checkBox";
editInput.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
label.innerText = taskString;
// Each element needs appending
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
//Add a new task
var addTask = function() {
console.log("Add Task...");
//Create a new list item with the text from the #new-task:
var listItem = createNewTaskElement(taskInput.value);
//Append listItem to incompleteTaskHolder
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
taskInput.value = "";
}
//Edit an existing task
var editTask = function() {
console.log("Edit Task...");
var listItem = this.parentNode;
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
// if class of the parent is .editMode
if (containsClass) {
//Switch from .editMode
//label text become the input's value
label.innerText = editInput.value;
} else {
//Switch to .editMode
//input value becomes the labels text
editInput.value = label.innerText;
}
//Toggle .editMode on the parent
listItem.classList.toggle("editMode");
}
//Delete an existing task
var deleteTask = function () {
console.log("Delete Task...");
//Remove the parent list item from the ul
var listItem = this.parentNode;
var ul = listItem.parentNode;
ul.removeChild(listItem);
}
//Mark a task as complete
var taskCompleted = function() {
console.log("Task Complete...");
//When the Checkbox is checked
//Append the task list item to the #completed-tasks ul
var listItem = this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
}
//Mark a task as incomplete
var taskIncomplete = function() {
console.log("Task Incomplete...");
//When the checkbox is unchecked appendTo #incomplete-tasks
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
//Set the click handler to the addTask function
addButton.addEventListener("click", addTask);
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
console.log("Bind List item events");
// select listitems chidlren
var checkBox = taskListItem.querySelector('input[type="checkbox"]');
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
//bind editTask to edit button
editButton.onclick = editTask;
//bind deleteTask to delete button
deleteButton.onclick = deleteTask;
//bind checkBoxEventHandler to checkbox
checkBox.onchange = checkBoxEventHandler;
}
//cycle over incompleteTaskHolder ul list items
for (var i = 0; i < incompleteTasksHolder.children.length; i ++) {
//bind events to list item's children (taskCompleted)
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
//cycle over completedTaskHolder ul list items
for (var i = 0; i < completedTasksHolder.children.length; i ++) {
//bind events to list item's children (taskCompleted)
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}