Clean code s1e1

README.md

@@ -1,5 +1,7 @@
 <img width="1199" alt="code-quality-task-screenshot" src="https://user-images.githubusercontent.com/8201843/113413843-4080fb80-93c4-11eb-9f20-15e4b4c1e430.png">
 
+https://yurapredein.github.io/clean-code-s1e1
+
 # Application Functionality :
 
 - Adding a new item to the "TODO" tasks list.

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<incompleteTaskHolder.children.length;i++){
-
+  }
+
+  //cycle over incompleteTaskHolder ul list items
+  //for each list item
+  for (var i=0; i<incompleteTaskHolder.children.length;i++){
     //bind events to list items chldren(tasksCompleted)
     bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
-}
-
-
-
-
-//cycle over completedTasksHolder ul list items
-for (var i=0; i<completedTasksHolder.children.length;i++){
+  }
+
+  //cycle over completedTasksHolder ul list items
+  for (var i=0; i<completedTasksHolder.children.length;i++){
     //bind events to list items chldren(tasksIncompleted)
     bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
-}
-
-
-
-
-// Issues with usability don't get seen until they are in front of a human tester.
-
-//prevent creation of empty tasks.
-
-//Change edit to save when you are in edit mode.
+  }
+
+  // Issues with usability don't get seen until they are in front of a human tester.
+  //prevent creation of empty tasks.
+  //Change edit to save when you are in edit mode.