Skip to content

Commit 09d383f

Browse files
Boburjon5555Boburjon5555
committed
refactor: improve JavaScript code style and formatting
1 parent f5970d3 commit 09d383f

File tree

1 file changed

+145
-171
lines changed

1 file changed

+145
-171
lines changed

‎app.js‎

Lines changed: 145 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -1,196 +1,170 @@
1-
//Document is the DOM can be accessed in the console with document.window.
1+
// Document is the DOM can be accessed in the console with document.window.
22
// Tree is from the top, html, body, p etc.
33

4-
//Problem: User interaction does not provide the correct results.
5-
//Solution: Add interactivity so the user can manage daily tasks.
6-
//Break things down into smaller steps and take each step at a time.
7-
4+
// Problem: User interaction does not provide the correct results.
5+
// Solution: Add interactivity so the user can manage daily tasks.
6+
// Break things down into smaller steps and take each step at a time.
87

98
// Event handling, user interaction is what starts the code execution.
109

11-
var taskInput=document.getElementById("new-task");//Add a new task.
12-
var addButton=document.getElementsByTagName("button")[0];//first button
13-
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incompleteTasks
14-
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
15-
16-
17-
//New task list item
18-
var createNewTaskElement=function(taskString){
19-
20-
var listItem=document.createElement("li");
21-
22-
//input (checkbox)
23-
var checkBox=document.createElement("input");//checkbx
24-
//label
25-
var label=document.createElement("label");//label
26-
//input (text)
27-
var editInput=document.createElement("input");//text
28-
//button.edit
29-
var editButton=document.createElement("button");//edit button
30-
31-
//button.delete
32-
var deleteButton=document.createElement("button");//delete button
33-
var deleteButtonImg=document.createElement("img");//delete button image
34-
35-
label.innerText=taskString;
36-
label.className='task';
37-
38-
//Each elements, needs appending
39-
checkBox.type="checkbox";
40-
editInput.type="text";
41-
editInput.className="task";
42-
43-
editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
44-
editButton.className="edit";
45-
46-
deleteButton.className="delete";
47-
deleteButtonImg.src='./remove.svg';
48-
deleteButtonImg.alt = "remove task";
49-
deleteButton.appendChild(deleteButtonImg);
50-
51-
52-
//and appending.
53-
listItem.appendChild(checkBox);
54-
listItem.appendChild(label);
55-
listItem.appendChild(editInput);
56-
listItem.appendChild(editButton);
57-
listItem.appendChild(deleteButton);
58-
return listItem;
59-
}
60-
61-
62-
63-
var addTask=function(){
64-
console.log("Add Task...");
65-
//Create a new list item with the text from the #new-task:
66-
if (!taskInput.value) return;
67-
var listItem=createNewTaskElement(taskInput.value);
68-
69-
//Append listItem to incompleteTaskHolder
70-
incompleteTaskHolder.appendChild(listItem);
71-
bindTaskEvents(listItem, taskCompleted);
72-
73-
taskInput.value="";
74-
75-
}
76-
77-
//Edit an existing task.
78-
79-
var editTask=function(){
80-
console.log("Edit Task...");
81-
console.log("Change 'edit' to 'save'");
82-
83-
84-
var listItem=this.parentNode;
85-
86-
var editInput=listItem.querySelector('input[type=text]');
87-
var label=listItem.querySelector("label");
88-
var editBtn=listItem.querySelector(".edit");
89-
var containsClass=listItem.classList.contains("editMode");
90-
//If class of the parent is .editmode
91-
if(containsClass){
92-
93-
//switch to .editmode
94-
//label becomes the inputs value.
95-
label.innerText=editInput.value;
96-
editBtn.innerText="Edit";
97-
}else{
98-
editInput.value=label.innerText;
99-
editBtn.innerText="Save";
100-
}
101-
102-
//toggle .editmode on the parent.
103-
listItem.classList.toggle("editMode");
10+
var taskInput = document.getElementById("new-task"); // Add a new task.
11+
var addButton = document.getElementsByTagName("button")[0]; // first button
12+
var incompleteTaskHolder = document.getElementById("incomplete-tasks"); // ul of #incomplete-tasks
13+
var completedTasksHolder = document.getElementById("completed-tasks"); // completed-tasks
14+
15+
// New task list item
16+
var createNewTaskElement = function(taskString) {
17+
var listItem = document.createElement("li");
18+
19+
// input (checkbox)
20+
var checkBox = document.createElement("input"); // checkbox
21+
// label
22+
var label = document.createElement("label"); // label
23+
// input (text)
24+
var editInput = document.createElement("input"); // text
25+
// button.edit
26+
var editButton = document.createElement("button"); // edit button
27+
// button.delete
28+
var deleteButton = document.createElement("button"); // delete button
29+
var deleteButtonImg = document.createElement("img"); // delete button image
30+
31+
label.innerText = taskString;
32+
label.className = "task";
33+
34+
// Each elements, needs appending
35+
checkBox.type = "checkbox";
36+
editInput.type = "text";
37+
editInput.className = "task";
38+
39+
editButton.innerText = "Edit"; // innerText encodes special characters, HTML does not.
40+
editButton.className = "edit";
41+
42+
deleteButton.className = "delete";
43+
deleteButtonImg.src = "./remove.svg";
44+
deleteButtonImg.alt = "Delete task";
45+
deleteButton.appendChild(deleteButtonImg);
46+
47+
// and appending.
48+
listItem.appendChild(checkBox);
49+
listItem.appendChild(label);
50+
listItem.appendChild(editInput);
51+
listItem.appendChild(editButton);
52+
listItem.appendChild(deleteButton);
53+
54+
return listItem;
10455
};
10556

57+
var addTask = function() {
58+
console.log("Add Task...");
59+
// Create a new list item with the text from the #new-task:
60+
if (!taskInput.value) return;
61+
var listItem = createNewTaskElement(taskInput.value);
10662

107-
//Delete task.
108-
var deleteTask=function(){
109-
console.log("Delete Task...");
110-
111-
var listItem=this.parentNode;
112-
var ul=listItem.parentNode;
113-
//Remove the parent list item from the ul.
114-
ul.removeChild(listItem);
63+
// Append listItem to incompleteTaskHolder
64+
incompleteTaskHolder.appendChild(listItem);
65+
bindTaskEvents(listItem, taskCompleted);
11566

116-
}
117-
118-
119-
//Mark task completed
120-
var taskCompleted=function(){
121-
console.log("Complete Task...");
122-
123-
//Append the task list item to the #completed-tasks
124-
var listItem=this.parentNode;
125-
completedTasksHolder.appendChild(listItem);
126-
bindTaskEvents(listItem, taskIncomplete);
127-
128-
}
129-
130-
131-
var taskIncomplete=function(){
132-
console.log("Incomplete Task...");
133-
//Mark task as incomplete.
134-
//When the checkbox is unchecked
135-
//Append the task list item to the #incompleteTasks.
136-
var listItem=this.parentNode;
137-
incompleteTaskHolder.appendChild(listItem);
138-
bindTaskEvents(listItem,taskCompleted);
139-
}
140-
141-
142-
143-
var ajaxRequest=function(){
144-
console.log("AJAX Request");
145-
}
67+
taskInput.value = "";
68+
};
14669

147-
//The glue to hold it all together.
70+
// Edit an existing task.
71+
var editTask = function() {
72+
console.log("Edit Task...");
73+
console.log("Change 'edit' to 'save'");
74+
75+
var listItem = this.parentNode;
76+
77+
var editInput = listItem.querySelector("input[type=text]");
78+
var label = listItem.querySelector("label");
79+
var editButton = listItem.querySelector(".edit");
80+
var containsClass = listItem.classList.contains("editMode");
81+
82+
// If class of the parent is .editMode
83+
if (containsClass) {
84+
// switch to .editMode
85+
// label becomes the inputs value.
86+
label.innerText = editInput.value;
87+
editButton.innerText = "Edit";
88+
} else {
89+
editInput.value = label.innerText;
90+
editButton.innerText = "Save";
91+
}
92+
93+
// toggle .editMode on the parent.
94+
listItem.classList.toggle("editMode");
95+
};
14896

97+
// Delete task.
98+
var deleteTask = function() {
99+
console.log("Delete Task...");
149100

150-
//Set the click handler to the addTask function.
151-
addButton.onclick=addTask;
152-
addButton.addEventListener("click",addTask);
153-
addButton.addEventListener("click",ajaxRequest);
101+
var listItem = this.parentNode;
102+
var ul = listItem.parentNode;
103+
// Remove the parent list item from the ul.
104+
ul.removeChild(listItem);
105+
};
154106

107+
// Mark task completed
108+
var taskCompleted = function() {
109+
console.log("Complete Task...");
155110

156-
var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
157-
console.log("bind list item events");
158-
//select ListItems children
159-
var checkBox=taskListItem.querySelector("input[type=checkbox]");
160-
var editButton=taskListItem.querySelector("button.edit");
161-
var deleteButton=taskListItem.querySelector("button.delete");
111+
// Append the task list item to the #completed-tasks
112+
var listItem = this.parentNode;
113+
completedTasksHolder.appendChild(listItem);
114+
bindTaskEvents(listItem, taskIncomplete);
115+
};
162116

117+
var taskIncomplete = function() {
118+
console.log("Incomplete Task...");
119+
// Mark task as incomplete.
120+
// When the checkbox is unchecked
121+
// Append the task list item to the #incomplete-tasks.
122+
var listItem = this.parentNode;
123+
incompleteTaskHolder.appendChild(listItem);
124+
bindTaskEvents(listItem, taskCompleted);
125+
};
163126

164-
//Bind editTask to edit button.
165-
editButton.onclick=editTask;
166-
//Bind deleteTask to delete button.
167-
deleteButton.onclick=deleteTask;
168-
//Bind taskCompleted to checkBoxEventHandler.
169-
checkBox.onchange=checkBoxEventHandler;
170-
}
127+
var ajaxRequest = function() {
128+
console.log("AJAX Request");
129+
};
171130

172-
//cycle over incompleteTaskHolder ul list items
173-
//for each list item
174-
for (var i=0; i<incompleteTaskHolder.children.length;i++){
131+
// The glue to hold it all together.
132+
133+
// Set the click handler to the addTask function.
134+
addButton.onclick = addTask;
135+
addButton.addEventListener("click", addTask);
136+
addButton.addEventListener("click", ajaxRequest);
137+
138+
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
139+
console.log("bind list item events");
140+
// select ListItems children
141+
var checkBox = taskListItem.querySelector("input[type=checkbox]");
142+
var editButton = taskListItem.querySelector("button.edit");
143+
var deleteButton = taskListItem.querySelector("button.delete");
144+
145+
// Bind editTask to edit button.
146+
editButton.onclick = editTask;
147+
// Bind deleteTask to delete button.
148+
deleteButton.onclick = deleteTask;
149+
// Bind taskCompleted to checkBoxEventHandler.
150+
checkBox.onchange = checkBoxEventHandler;
151+
};
175152

176-
//bind events to list items chldren(tasksCompleted)
177-
bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
153+
// cycle over incompleteTaskHolder ul list items
154+
// for each list item
155+
for (var i = 0; i < incompleteTaskHolder.children.length; i++) {
156+
// bind events to list items children (tasksCompleted)
157+
bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
178158
}
179159

180-
181-
182-
183-
//cycle over completedTasksHolder ul list items
184-
for (var i=0; i<completedTasksHolder.children.length;i++){
185-
//bind events to list items chldren(tasksIncompleted)
186-
bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
160+
// cycle over completedTasksHolder ul list items
161+
for (var i = 0; i < completedTasksHolder.children.length; i++) {
162+
// bind events to list items children (tasksIncompleted)
163+
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
187164
}
188165

189-
190-
191-
192166
// Issues with usability don't get seen until they are in front of a human tester.
193167

194-
//prevent creation of empty tasks.
168+
// Prevent creation of empty tasks.
195169

196-
//Change edit to save when you are in edit mode.
170+
// Change edit to save when you are in edit mode.

0 commit comments

Comments
 (0)