diff --git a/README.md b/README.md
index b90dba947e..499518ec65 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
+https://yurapredein.github.io/clean-code-s1e1
+
# Application Functionality :
- Adding a new item to the "TODO" tasks list.
diff --git a/app.js b/app.js
index ab737a6002..6eac09de39 100644
--- a/app.js
+++ b/app.js
@@ -1,195 +1,177 @@
-//Document is the DOM can be accessed in the console with document.window.
-// Tree is from the top, html, body, p etc.
-
-//Problem: User interaction does not provide the correct results.
-//Solution: Add interactivity so the user can manage daily tasks.
-//Break things down into smaller steps and take each step at a time.
-
-
-// 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 completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
-
-
-//New task list item
-var createNewTaskElement=function(taskString){
-
- var listItem=document.createElement("li");
-
- //input (checkbox)
- var checkBox=document.createElement("input");//checkbx
- //label
- var label=document.createElement("label");//label
- //input (text)
- var editInput=document.createElement("input");//text
- //button.edit
- var editButton=document.createElement("button");//edit button
-
- //button.delete
- var deleteButton=document.createElement("button");//delete button
- var deleteButtonImg=document.createElement("img");//delete button image
-
- label.innerText=taskString;
- label.className='task';
-
- //Each elements, needs appending
- checkBox.type="checkbox";
- editInput.type="text";
- editInput.className="task";
-
- editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
- editButton.className="edit";
-
- deleteButton.className="delete";
- deleteButtonImg.src='./remove.svg';
- deleteButton.appendChild(deleteButtonImg);
-
-
- //and appending.
- listItem.appendChild(checkBox);
- listItem.appendChild(label);
- listItem.appendChild(editInput);
- listItem.appendChild(editButton);
- listItem.appendChild(deleteButton);
- return listItem;
+ //Document is the DOM can be accessed in the console with document.window.
+ // Tree is from the top, html, body, p etc.
+
+ //Problem: User interaction does not provide the correct results.
+ //Solution: Add interactivity so the user can manage daily tasks.
+ //Break things down into smaller steps and take each step at a time.
+
+
+ // 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("incomplete-tasks");//ul of #incomplete-tasks
+ var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
+
+
+ //New task list item
+ var createNewTaskElement=function(taskString){
+
+ var listItem=document.createElement("li");
+ listItem.classList.add("tasks-list__item");
+ //input (checkbox)
+ var checkBox=document.createElement("input");//checkbox
+ checkBox.classList.add("tasks-list__input", "tasks-list__input_checkbox");
+ //label
+ var label=document.createElement("label");//label
+ label.classList.add("tasks-list__task-text");
+ //input (text)
+ var editInput=document.createElement("input");//text
+ editInput.classList.add("tasks-list__input", "tasks-list__input_text");
+ //button.edit
+ var editButton=document.createElement("button");//edit button
+ editButton.classList.add("tasks-list__button", "tasks-list__button_edit");
+ //button.delete
+ var deleteButton=document.createElement("button");//delete button
+ var deleteButtonImg=document.createElement("img");//delete button image
+ deleteButton.classList.add("tasks-list__button", "tasks-list__button_delete");
+ deleteButtonImg.classList.add("tasks-list__button-image");
+ label.innerText=taskString;
+
+ checkBox.type="checkbox";
+ editInput.type="text";
+
+ editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
+
+ deleteButtonImg.src="./remove.svg";
+ deleteButtonImg.alt = "delete todo item button";
+ deleteButton.appendChild(deleteButtonImg);
+
+
+ //and appending.
+ listItem.appendChild(checkBox);
+ listItem.appendChild(label);
+ listItem.appendChild(editInput);
+ listItem.appendChild(editButton);
+ listItem.appendChild(deleteButton);
+ return listItem;
}
-
-
-
-var addTask=function(){
+
+
+
+ var addTask=function(){
console.log("Add Task...");
//Create a new list item with the text from the #new-task:
if (!taskInput.value) return;
var listItem=createNewTaskElement(taskInput.value);
-
+
//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
-
+
taskInput.value="";
-
-}
-
-//Edit an existing task.
-
-var editTask=function(){
+ }
+
+ //Edit an existing task.
+
+ var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");
-
-
+
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("input[type=text]");
+ var label=listItem.querySelector(".tasks-list__task-text");
+ var editBtn=listItem.querySelector(".tasks-list__button_edit");
+ var containsClass=listItem.classList.contains("tasks-list__item_edit-mode");
+ //If class of the parent is .edit-mode
if(containsClass){
- //switch to .editmode
- //label becomes the inputs value.
- label.innerText=editInput.value;
- editBtn.innerText="Edit";
- }else{
- editInput.value=label.innerText;
- editBtn.innerText="Save";
+ //switch to .edit-mode
+ //label becomes the inputs value.
+ label.innerText=editInput.value;
+ editBtn.innerText="Edit";
+ } else{
+ editInput.value=label.innerText;
+ editBtn.innerText="Save";
}
- //toggle .editmode on the parent.
- listItem.classList.toggle("editMode");
-};
+ //toggle .edit-mode on the parent.
+ listItem.classList.toggle("tasks-list__item_edit-mode");
+ };
-//Delete task.
-var deleteTask=function(){
+ //Delete task.
+ var deleteTask=function(){
console.log("Delete Task...");
-
+
var listItem=this.parentNode;
var ul=listItem.parentNode;
//Remove the parent list item from the ul.
ul.removeChild(listItem);
-
-}
-
-
-//Mark task completed
-var taskCompleted=function(){
+ }
+
+ //Mark task completed
+ var taskCompleted=function(){
console.log("Complete Task...");
-
- //Append the task list item to the #completed-tasks
+
+ //Append the task list item to the #incomplete-tasks
var listItem=this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
-
-}
-
-
-var taskIncomplete=function(){
+ }
+
+ var taskIncomplete=function(){
console.log("Incomplete Task...");
-//Mark task as incomplete.
+ //Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incompleteTasks.
var listItem=this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
-}
-
-
-
-var ajaxRequest=function(){
+ }
+
+
+ var ajaxRequest=function(){
console.log("AJAX Request");
-}
-
-//The glue to hold it all together.
+ }
+
+ //The glue to hold it all together.
+ //Set the click handler to the addTask function.
+ addButton.onclick=addTask;
+ addButton.addEventListener("click",addTask);
+ addButton.addEventListener("click",ajaxRequest);
-//Set the click handler to the addTask function.
-addButton.onclick=addTask;
-addButton.addEventListener("click",addTask);
-addButton.addEventListener("click",ajaxRequest);
-
-
-var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
+ 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");
-
-
+ //select ListItems children
+ var checkBox=taskListItem.querySelector(".tasks-list__input_checkbox");
+ var editButton=taskListItem.querySelector(".tasks-list__button_edit");
+ var deleteButton=taskListItem.querySelector(".tasks-list__button_delete");
+
+
//Bind editTask to edit button.
editButton.onclick=editTask;
//Bind deleteTask to delete button.
deleteButton.onclick=deleteTask;
//Bind taskCompleted to checkBoxEventHandler.
checkBox.onchange=checkBoxEventHandler;
-}
-
-//cycle over incompleteTaskHolder ul list items
-//for each list item
-for (var i=0; i
-Todo App
-
-
-
-
-
+https://yurapredein.github.io/clean-code-s1e1
+
# Application Functionality :
- Adding a new item to the "TODO" tasks list.
diff --git a/app.js b/app.js
index ab737a6002..6eac09de39 100644
--- a/app.js
+++ b/app.js
@@ -1,195 +1,177 @@
-//Document is the DOM can be accessed in the console with document.window.
-// Tree is from the top, html, body, p etc.
-
-//Problem: User interaction does not provide the correct results.
-//Solution: Add interactivity so the user can manage daily tasks.
-//Break things down into smaller steps and take each step at a time.
-
-
-// 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 completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
-
-
-//New task list item
-var createNewTaskElement=function(taskString){
-
- var listItem=document.createElement("li");
-
- //input (checkbox)
- var checkBox=document.createElement("input");//checkbx
- //label
- var label=document.createElement("label");//label
- //input (text)
- var editInput=document.createElement("input");//text
- //button.edit
- var editButton=document.createElement("button");//edit button
-
- //button.delete
- var deleteButton=document.createElement("button");//delete button
- var deleteButtonImg=document.createElement("img");//delete button image
-
- label.innerText=taskString;
- label.className='task';
-
- //Each elements, needs appending
- checkBox.type="checkbox";
- editInput.type="text";
- editInput.className="task";
-
- editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
- editButton.className="edit";
-
- deleteButton.className="delete";
- deleteButtonImg.src='./remove.svg';
- deleteButton.appendChild(deleteButtonImg);
-
-
- //and appending.
- listItem.appendChild(checkBox);
- listItem.appendChild(label);
- listItem.appendChild(editInput);
- listItem.appendChild(editButton);
- listItem.appendChild(deleteButton);
- return listItem;
+ //Document is the DOM can be accessed in the console with document.window.
+ // Tree is from the top, html, body, p etc.
+
+ //Problem: User interaction does not provide the correct results.
+ //Solution: Add interactivity so the user can manage daily tasks.
+ //Break things down into smaller steps and take each step at a time.
+
+
+ // 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("incomplete-tasks");//ul of #incomplete-tasks
+ var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
+
+
+ //New task list item
+ var createNewTaskElement=function(taskString){
+
+ var listItem=document.createElement("li");
+ listItem.classList.add("tasks-list__item");
+ //input (checkbox)
+ var checkBox=document.createElement("input");//checkbox
+ checkBox.classList.add("tasks-list__input", "tasks-list__input_checkbox");
+ //label
+ var label=document.createElement("label");//label
+ label.classList.add("tasks-list__task-text");
+ //input (text)
+ var editInput=document.createElement("input");//text
+ editInput.classList.add("tasks-list__input", "tasks-list__input_text");
+ //button.edit
+ var editButton=document.createElement("button");//edit button
+ editButton.classList.add("tasks-list__button", "tasks-list__button_edit");
+ //button.delete
+ var deleteButton=document.createElement("button");//delete button
+ var deleteButtonImg=document.createElement("img");//delete button image
+ deleteButton.classList.add("tasks-list__button", "tasks-list__button_delete");
+ deleteButtonImg.classList.add("tasks-list__button-image");
+ label.innerText=taskString;
+
+ checkBox.type="checkbox";
+ editInput.type="text";
+
+ editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
+
+ deleteButtonImg.src="./remove.svg";
+ deleteButtonImg.alt = "delete todo item button";
+ deleteButton.appendChild(deleteButtonImg);
+
+
+ //and appending.
+ listItem.appendChild(checkBox);
+ listItem.appendChild(label);
+ listItem.appendChild(editInput);
+ listItem.appendChild(editButton);
+ listItem.appendChild(deleteButton);
+ return listItem;
}
-
-
-
-var addTask=function(){
+
+
+
+ var addTask=function(){
console.log("Add Task...");
//Create a new list item with the text from the #new-task:
if (!taskInput.value) return;
var listItem=createNewTaskElement(taskInput.value);
-
+
//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
-
+
taskInput.value="";
-
-}
-
-//Edit an existing task.
-
-var editTask=function(){
+ }
+
+ //Edit an existing task.
+
+ var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");
-
-
+
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("input[type=text]");
+ var label=listItem.querySelector(".tasks-list__task-text");
+ var editBtn=listItem.querySelector(".tasks-list__button_edit");
+ var containsClass=listItem.classList.contains("tasks-list__item_edit-mode");
+ //If class of the parent is .edit-mode
if(containsClass){
- //switch to .editmode
- //label becomes the inputs value.
- label.innerText=editInput.value;
- editBtn.innerText="Edit";
- }else{
- editInput.value=label.innerText;
- editBtn.innerText="Save";
+ //switch to .edit-mode
+ //label becomes the inputs value.
+ label.innerText=editInput.value;
+ editBtn.innerText="Edit";
+ } else{
+ editInput.value=label.innerText;
+ editBtn.innerText="Save";
}
- //toggle .editmode on the parent.
- listItem.classList.toggle("editMode");
-};
+ //toggle .edit-mode on the parent.
+ listItem.classList.toggle("tasks-list__item_edit-mode");
+ };
-//Delete task.
-var deleteTask=function(){
+ //Delete task.
+ var deleteTask=function(){
console.log("Delete Task...");
-
+
var listItem=this.parentNode;
var ul=listItem.parentNode;
//Remove the parent list item from the ul.
ul.removeChild(listItem);
-
-}
-
-
-//Mark task completed
-var taskCompleted=function(){
+ }
+
+ //Mark task completed
+ var taskCompleted=function(){
console.log("Complete Task...");
-
- //Append the task list item to the #completed-tasks
+
+ //Append the task list item to the #incomplete-tasks
var listItem=this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
-
-}
-
-
-var taskIncomplete=function(){
+ }
+
+ var taskIncomplete=function(){
console.log("Incomplete Task...");
-//Mark task as incomplete.
+ //Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incompleteTasks.
var listItem=this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
-}
-
-
-
-var ajaxRequest=function(){
+ }
+
+
+ var ajaxRequest=function(){
console.log("AJAX Request");
-}
-
-//The glue to hold it all together.
+ }
+
+ //The glue to hold it all together.
+ //Set the click handler to the addTask function.
+ addButton.onclick=addTask;
+ addButton.addEventListener("click",addTask);
+ addButton.addEventListener("click",ajaxRequest);
-//Set the click handler to the addTask function.
-addButton.onclick=addTask;
-addButton.addEventListener("click",addTask);
-addButton.addEventListener("click",ajaxRequest);
-
-
-var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
+ 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");
-
-
+ //select ListItems children
+ var checkBox=taskListItem.querySelector(".tasks-list__input_checkbox");
+ var editButton=taskListItem.querySelector(".tasks-list__button_edit");
+ var deleteButton=taskListItem.querySelector(".tasks-list__button_delete");
+
+
//Bind editTask to edit button.
editButton.onclick=editTask;
//Bind deleteTask to delete button.
deleteButton.onclick=deleteTask;
//Bind taskCompleted to checkBoxEventHandler.
checkBox.onchange=checkBoxEventHandler;
-}
-
-//cycle over incompleteTaskHolder ul list items
-//for each list item
-for (var i=0; i
+ Want more details?
+