diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000000..13566b81b0
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/clean-code-s1e1.iml b/.idea/clean-code-s1e1.iml
new file mode 100644
index 0000000000..24643cc374
--- /dev/null
+++ b/.idea/clean-code-s1e1.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000000..84337bf755
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000000..35eb1ddfbb
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/app.js b/app.js
index ab737a6002..5ae2dbcc76 100644
--- a/app.js
+++ b/app.js
@@ -1,3 +1,4 @@
+
//Document is the DOM can be accessed in the console with document.window.
// Tree is from the top, html, body, p etc.
@@ -9,8 +10,8 @@
// Event handling, user interaction is what starts the code execution.
var taskInput=document.getElementById("new-task");//Add a new task.
-var addButton=document.getElementsByTagName("button")[0];//first button
-var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks
+var addButton=document.getElementsByClassName("task-btn")[0];//first button
+var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
@@ -18,6 +19,7 @@ var completedTasksHolder=document.getElementById("completed-tasks");//completed-
var createNewTaskElement=function(taskString){
var listItem=document.createElement("li");
+ listItem.className = "task-list-item";
//input (checkbox)
var checkBox=document.createElement("input");//checkbx
@@ -25,26 +27,28 @@ var createNewTaskElement=function(taskString){
var label=document.createElement("label");//label
//input (text)
var editInput=document.createElement("input");//text
- //button.edit
- var editButton=document.createElement("button");//edit button
+ //button.edit-task
+ var editButton=document.createElement("button");//edit-task button
- //button.delete
- var deleteButton=document.createElement("button");//delete button
- var deleteButtonImg=document.createElement("img");//delete button image
+ //button.delete-task
+ var deleteButton=document.createElement("button");//delete-task button
+ var deleteButtonImg=document.createElement("img");//delete-task button image
label.innerText=taskString;
- label.className='task';
+ label.className='task task-label';
//Each elements, needs appending
checkBox.type="checkbox";
+ checkBox.className = "task-checkbox";
editInput.type="text";
- editInput.className="task";
+ editInput.className="task task-text";
editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
- editButton.className="edit";
+ editButton.className="task-btn edit-task";
- deleteButton.className="delete";
+ deleteButton.className="task-btn delete-task";
deleteButtonImg.src='./remove.svg';
+ deleteButtonImg.className = "delete-task-img";
deleteButton.appendChild(deleteButtonImg);
@@ -82,14 +86,14 @@ var editTask=function(){
var listItem=this.parentNode;
- var editInput=listItem.querySelector('input[type=text]');
- var label=listItem.querySelector("label");
- var editBtn=listItem.querySelector(".edit");
- var containsClass=listItem.classList.contains("editMode");
- //If class of the parent is .editmode
+ var editInput=listItem.querySelector('.task-text');
+ var label=listItem.querySelector(".task-label");
+ var editBtn=listItem.querySelector(".edit-task");
+ var containsClass=listItem.classList.contains("edit-mode");
+ //If class of the parent is .edit-mode
if(containsClass){
- //switch to .editmode
+ //switch to .edit-mode
//label becomes the inputs value.
label.innerText=editInput.value;
editBtn.innerText="Edit";
@@ -98,8 +102,8 @@ var editTask=function(){
editBtn.innerText="Save";
}
- //toggle .editmode on the parent.
- listItem.classList.toggle("editMode");
+ //toggle .edit-mode on the parent.
+ listItem.classList.toggle("edit-mode");
};
@@ -131,7 +135,7 @@ var taskIncomplete=function(){
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
- //Append the task list item to the #incompleteTasks.
+ //Append the task list item to the #incomplete-tasks.
var listItem=this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
@@ -155,14 +159,14 @@ addButton.addEventListener("click",ajaxRequest);
var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
console.log("bind list item events");
//select ListItems children
- var checkBox=taskListItem.querySelector("input[type=checkbox]");
- var editButton=taskListItem.querySelector("button.edit");
- var deleteButton=taskListItem.querySelector("button.delete");
+ var checkBox=taskListItem.querySelector(".task-checkbox");
+ var editButton=taskListItem.querySelector(".task-btn.edit-task");
+ var deleteButton=taskListItem.querySelector(".task-btn.delete-task");
- //Bind editTask to edit button.
+ //Bind editTask to edit-task button.
editButton.onclick=editTask;
- //Bind deleteTask to delete button.
+ //Bind deleteTask to delete-task button.
deleteButton.onclick=deleteTask;
//Bind taskCompleted to checkBoxEventHandler.
checkBox.onchange=checkBoxEventHandler;
@@ -190,6 +194,4 @@ for (var i=0; i
-Todo App
-
-
-
-
-
+ Want more details?
+