Clean code s1e1

README.md

@@ -1,13 +1,15 @@
-<img width="1199" alt="code-quality-task-screenshot" src="https://user-images.githubusercontent.com/8201843/113413843-4080fb80-93c4-11eb-9f20-15e4b4c1e430.png">
+<img width="1199" alt="code-quality-task-screenshot" 
+  src="https://VictorREDrudko.github.io/clean-code-s1e1/index.html"
+>
 
 # Application Functionality :
 
-    - Adding a new item to the "TODO" task list
-    - Editing an item in the "TODO" task list
-    - Deleting an item from the "TODO" task list
-    - Setting an item to completed status and moving it to the "COMPLETED" list via checkbox
+- Adding a new item to the "TODO" task list
+- Editing an item in the "TODO" task list
+- Deleting an item from the "TODO" task list
+- Setting an item to completed status and moving it to the "COMPLETED" list via checkbox
 
-    - Deleting an item from the "COMPLETED" list
-    - Editing an item from the "COMPLETED" list
-    - Setting an item to "Incomplete" status and moving it to the "TODO" list via checkbox
-    - Animation on the delete button
+- Deleting an item from the "COMPLETED" list
+- Editing an item from the "COMPLETED" list
+- Setting an item to "Incomplete" status and moving it to the "TODO" list via checkbox
+- Animation on the delete button

app.js

@@ -5,191 +5,181 @@
 //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
+var completedTasksHolder=document.getElementById("completedTasks");//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;
+  var listItem=document.createElement("li");
+  listItem.className='item';
+
+  //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='item__label';
+
+  //Each elements, needs appending
+  checkBox.type="checkbox";
+	checkBox.className="item__input_checkbox";
+  editInput.type="text";
+  editInput.className="item__input item__input_text";
+
+  editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
+  editButton.className="item__button item__button_edit";
+
+  deleteButton.className="item__button item__button_delete";
+  deleteButtonImg.className="item__delete-img";
+	deleteButtonImg.setAttribute('alt', 'cross');
+  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;
 }
 
 
-
 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);
+  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);
 
-    taskInput.value="";
+  //Append listItem to incompleteTaskHolder
+  incompleteTaskHolder.appendChild(listItem);
+  bindTaskEvents(listItem, taskCompleted);
 
+  taskInput.value="";
 }
 
 //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
-    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";
+  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(".item__button_edit");
+  var containsClass=listItem.classList.contains("edit-mode");
+  //If class of the parent is .editmode
+  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";
     }
 
-    //toggle .editmode on the parent.
-    listItem.classList.toggle("editMode");
+  //toggle .editmode on the parent.
+  listItem.classList.toggle("edit-mode");
 };
 
 
 //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);
+  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(){
-    console.log("Complete Task...");
-
-    //Append the task list item to the #completed-tasks
-    var listItem=this.parentNode;
-    completedTasksHolder.appendChild(listItem);
-    bindTaskEvents(listItem, taskIncomplete);
-
+  console.log("Complete Task...");
+
+  //Append the task list item to the #completed-tasks
+  var listItem=this.parentNode;
+  const listLabel = listItem.querySelector('.item__label')
+  listLabel.className = 'item__label item__label_completed';
+  completedTasksHolder.appendChild(listItem);
+  bindTaskEvents(listItem, taskIncomplete);
 }
 
 
 var taskIncomplete=function(){
-    console.log("Incomplete Task...");
-//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);
+  console.log("Incomplete Task...");
+  //Mark task as incomplete.
+  //When the checkbox is unchecked
+  //Append the task list item to the #incompleteTasks.
+  var listItem=this.parentNode;
+  const listLabel = listItem.querySelector('.item__label_completed');
+  listLabel.className = 'item__label';
+  incompleteTaskHolder.appendChild(listItem);
+  bindTaskEvents(listItem,taskCompleted);
 }
 
 
 
 var ajaxRequest=function(){
-    console.log("AJAX Request");
+  console.log("AJAX Request");
 }
 
 //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);
 
 
 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");
-
-
-    //Bind editTask to edit button.
-    editButton.onclick=editTask;
-    //Bind deleteTask to delete button.
-    deleteButton.onclick=deleteTask;
-    //Bind taskCompleted to checkBoxEventHandler.
-    checkBox.onchange=checkBoxEventHandler;
+  console.log("bind list item events");
+  //select ListItems children
+  var checkBox=taskListItem.querySelector("input[type=checkbox]");
+  var editButton=taskListItem.querySelector("button.item__button_edit");
+  var deleteButton=taskListItem.querySelector("button.item__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++){
-
-    //bind events to list items chldren(tasksCompleted)
-    bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
+  //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++){
-    //bind events to list items chldren(tasksIncompleted)
-    bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
+  //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.