From 19faf87c17ea48750bc2829882d1fdbd65e10650 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 20:23:35 +0500 Subject: [PATCH 01/29] refactor: change indentation to 2 spaces according to rule 1.1 in html-and-css.md --- app.js | 210 +++++++++++++++++++++++++++--------------------------- style.css | 144 ++++++++++++++++++------------------- 2 files changed, 177 insertions(+), 177 deletions(-) diff --git a/app.js b/app.js index ab737a60027..b8e1332daeb 100644 --- a/app.js +++ b/app.js @@ -17,130 +17,130 @@ var completedTasksHolder=document.getElementById("completed-tasks");//completed- //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"); + + //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 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); + 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); + //Append listItem to incompleteTaskHolder + incompleteTaskHolder.appendChild(listItem); + bindTaskEvents(listItem, taskCompleted); - taskInput.value=""; + 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"; - } - - //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + 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"; + } + + //toggle .editmode on the parent. + listItem.classList.toggle("editMode"); }; //Delete task. var deleteTask=function(){ - console.log("Delete Task..."); + console.log("Delete Task..."); - var listItem=this.parentNode; - var ul=listItem.parentNode; - //Remove the parent list item from the ul. - ul.removeChild(listItem); + 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..."); + console.log("Complete Task..."); - //Append the task list item to the #completed-tasks - var listItem=this.parentNode; - completedTasksHolder.appendChild(listItem); - bindTaskEvents(listItem, taskIncomplete); + //Append the task list item to the #completed-tasks + var listItem=this.parentNode; + 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; + incompleteTaskHolder.appendChild(listItem); + bindTaskEvents(listItem,taskCompleted); } var ajaxRequest=function(){ - console.log("AJAX Request"); + console.log("AJAX Request"); } //The glue to hold it all together. @@ -153,27 +153,27 @@ 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.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; } //cycle over incompleteTaskHolder ul list items //for each list item for (var i=0; i * { - vertical-align: middle; + vertical-align: middle; } li > input[type="checkbox"] { - margin: 0 10px; + margin: 0 10px; } li > label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; + padding-left: 10px; + box-sizing: border-box; + font-size: 18px; + width: 226px; } li > input[type="text"] { - width: 226px + width: 226px } button.delete img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; } button.delete img:hover { - transform: rotateZ(0); + transform: rotateZ(0); } /* Completed */ ul#completed-tasks label { - text-decoration: line-through - color: #888; + text-decoration: line-through + color: #888; } /* Edit Task */ ul li input[type=text] { - display:none + display:none } ul li.editMode input[type=text] { - display:inline-block; - width:224px + display:inline-block; + width:224px } ul li.editMode label { - display:none; + display:none; } \ No newline at end of file From 620662877f26bc8e801cbf4bbef4cf58c791ddfa Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 20:37:16 +0500 Subject: [PATCH 02/29] refactor: change letter case in HTML and CSS according to rule 1.2 in html-and-css.md --- index.html | 8 ++++---- style.css | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60ca..a05d026d4fa 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ -Todo App +Todo App - - + +
Want more details?

@@ -14,6 +14,6 @@
- + \ No newline at end of file diff --git a/style.css b/style.css index 8bf81d3688c..a7e20de76f7 100644 --- a/style.css +++ b/style.css @@ -54,7 +54,7 @@ button { cursor: pointer; } button:hover { - color: #3a3A3a; + color: #3a3a3a; } /* Heading */ h3, @@ -73,8 +73,8 @@ input[type="text"] { line-height: 18px; height: 21px; padding: 0 9px; - border: 1px solid #dDd; - background: #FFF; + border: 1px solid #ddd; + background: #fff; border-radius: 6px; font-family: Lato, sans-serif; color: #888; From 752695f1f1f40569cdb6528a1bbb0cdf3cc70e49 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 20:38:37 +0500 Subject: [PATCH 03/29] refactor: replace single quotes by double according to rule 1.3 in html-and-css.md --- app.js | 6 +++--- index.html | 12 ++++++------ style.css | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app.js b/app.js index b8e1332daeb..2e23550949b 100644 --- a/app.js +++ b/app.js @@ -33,7 +33,7 @@ var createNewTaskElement=function(taskString){ var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; - label.className='task'; + label.className="task"; //Each elements, needs appending checkBox.type="checkbox"; @@ -44,7 +44,7 @@ var createNewTaskElement=function(taskString){ editButton.className="edit"; deleteButton.className="delete"; - deleteButtonImg.src='./remove.svg'; + deleteButtonImg.src="./remove.svg"; deleteButton.appendChild(deleteButtonImg); @@ -82,7 +82,7 @@ var editTask=function(){ var listItem=this.parentNode; - var editInput=listItem.querySelector('input[type=text]'); + var editInput=listItem.querySelector("input[type=text]"); var label=listItem.querySelector("label"); var editBtn=listItem.querySelector(".edit"); var containsClass=listItem.classList.contains("editMode"); diff --git a/index.html b/index.html index a05d026d4fa..d6533234a5d 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,15 @@ Todo App - + -
Want more details?
-

+
Want more details?
+

Todo

-
    -
    • -
    • +
      +
      • +

    Completed

    diff --git a/style.css b/style.css index a7e20de76f7..d3718bdab84 100644 --- a/style.css +++ b/style.css @@ -58,7 +58,7 @@ button:hover { } /* Heading */ h3, -label[for='new-task'] { +label[for="new-task"] { color: #333; font-weight: 700; font-size: 15px; @@ -84,7 +84,7 @@ input[type="text"]:focus { } /* New Task */ -label[for='new-task'] { +label[for="new-task"] { display: block; margin: 0 0 20px; } From 719140d9bb8d0f52bc5c1e53c001e724f781afd7 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 20:57:30 +0500 Subject: [PATCH 04/29] refactor: apply general HTML formatting according to rule 2.1 in html-and-css.md --- index.html | 71 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index d6533234a5d..736a53f2a62 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,56 @@ -Todo App - - - - -
    Want more details?
    -

    -

    Todo

    -
      -
      • -
      • -

    Completed

    • -
      • -
    -
    - - + + Todo App + + + + +
    + + Want more details? +
    +
    +

    + +

    + + +
    +

    +

    Todo

    +
      +
    • + + + + + +
      • +
    • + + + + + +
      • +
    +

    Completed

    +
      +
    • + + + + + +
      • +
    +
    + + \ No newline at end of file From 05c32830c0b60a303175f1264c97ae742d7abf16 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 21:05:38 +0500 Subject: [PATCH 05/29] refactor: add HTML5 document type tag according to rule 2.2 in html-and-css.md --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 736a53f2a62..448acb9ee1c 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + Todo App From a240da7973374cf1e0cd6507b018f2373108600f Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 21:13:46 +0500 Subject: [PATCH 06/29] fix: add lang attribute to html start tag to make HTML valid --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 448acb9ee1c..cb025c38ad9 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Todo App From c60d4738319accf7862643da032bfeeb3f4cd95b Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 21:22:02 +0500 Subject: [PATCH 07/29] refactor: replace mnemonic symbol with character in HTML according to rule 2.3 in html-and-css.md --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index cb025c38ad9..484495c9339 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
    - Want more details? + Want more details?

    From 51cbd516b0c41f9bd61186578c823b0d862b3384 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 21:23:09 +0500 Subject: [PATCH 08/29] refactor: remove type attribute in link tags for styles and scripts according to rule 2.4 in html-and-css.md --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 484495c9339..0e599f6d75f 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,8 @@ Todo App - - + +

    @@ -52,6 +52,6 @@

    Completed

- + \ No newline at end of file From 9814f05bf54646dc3478f6cdaabfcfaf737d1153 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 21:28:19 +0500 Subject: [PATCH 09/29] fix: remove obsolete charset attribute in link tag to make HTML valid --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 0e599f6d75f..3d4f6c9b9b2 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Todo App - +
From ce9f41ff1a2fb14917cf67baf4f88b3c52b5d3a8 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 22:02:12 +0500 Subject: [PATCH 10/29] refactor: separate words in class names and id by a hyphen according to rule 3.1 in html-and-css.md --- app.js | 14 +++++++------- index.html | 8 ++++---- style.css | 6 +++--- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/app.js b/app.js index 2e23550949b..f852b5e01e7 100644 --- a/app.js +++ b/app.js @@ -10,7 +10,7 @@ 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 incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks @@ -85,11 +85,11 @@ var editTask=function(){ 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 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 +98,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 +131,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); diff --git a/index.html b/index.html index 3d4f6c9b9b2..a42384fd79b 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,10 @@
- Want more details? + Want more details?
-

+

@@ -19,7 +19,7 @@

Todo

-
    +
    • @@ -29,7 +29,7 @@

      Todo

      • -
    • +
    • diff --git a/style.css b/style.css index d3718bdab84..0d814c556b2 100644 --- a/style.css +++ b/style.css @@ -13,7 +13,7 @@ body { .aaa img { width: 100%; } -.aaa .more_inf { +.aaa .more-inf { font-family: fantasy, cursive; } @@ -138,11 +138,11 @@ ul li input[type=text] { display:none } -ul li.editMode input[type=text] { +ul li.edit-mode input[type=text] { display:inline-block; width:224px } -ul li.editMode label { +ul li.edit-mode label { display:none; } \ No newline at end of file From 3e8b87ac4c4e143e32d2d52f42d7000a722386e8 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 22:30:59 +0500 Subject: [PATCH 11/29] refactor: change classes and id's names to meaningful ones according to rule 3.2 in html-and-css.m --- app.js | 10 +++++----- index.html | 16 ++++++++-------- style.css | 12 ++++++------ 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/app.js b/app.js index f852b5e01e7..15242433594 100644 --- a/app.js +++ b/app.js @@ -41,9 +41,9 @@ var createNewTaskElement=function(taskString){ editInput.className="task"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + editButton.className="edit-task"; - deleteButton.className="delete"; + deleteButton.className="delete-task"; deleteButtonImg.src="./remove.svg"; deleteButton.appendChild(deleteButtonImg); @@ -84,7 +84,7 @@ var editTask=function(){ var editInput=listItem.querySelector("input[type=text]"); var label=listItem.querySelector("label"); - var editBtn=listItem.querySelector(".edit"); + var editBtn=listItem.querySelector(".edit-task"); var containsClass=listItem.classList.contains("edit-mode"); //If class of the parent is .edit-mode if(containsClass){ @@ -156,8 +156,8 @@ 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 editButton=taskListItem.querySelector("button.edit-task"); + var deleteButton=taskListItem.querySelector("button.delete-task"); //Bind editTask to edit button. diff --git a/index.html b/index.html index a42384fd79b..404971f4645 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,9 @@ -
      +
      - Want more details? + Want more details?

      @@ -24,8 +24,8 @@

      Todo

      - - +
      • @@ -33,8 +33,8 @@

      Todo

      - - + @@ -45,8 +45,8 @@

      Completed

      - - + diff --git a/style.css b/style.css index 0d814c556b2..12f33eb46f5 100644 --- a/style.css +++ b/style.css @@ -4,21 +4,21 @@ body { color: #333; font-family: Lato, sans-serif; } -.aaa { +.header { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa img { +.header img { width: 100%; } -.aaa .more-inf { +.header .more-information { font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { text-align: center; +.header { text-align: center; } } .centered-main-page-element { @@ -118,12 +118,12 @@ li > label { li > input[type="text"] { width: 226px } -button.delete img { +button.delete-task img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +button.delete-task img:hover { transform: rotateZ(0); } From 32b3d343d91fdc4201b01c9cf0c0c04b402ef5e3 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 22:55:00 +0500 Subject: [PATCH 12/29] refactor: change classes and id's names to as short as possible according to rule 3.3 in html-and-css.md --- index.html | 8 ++++---- style.css | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 404971f4645..99d55b30fce 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,12 @@
      - Want more details? + Want more details?
      -
      -

      +

      +

      -

      +
      diff --git a/style.css b/style.css index 12f33eb46f5..1641e7858ff 100644 --- a/style.css +++ b/style.css @@ -13,7 +13,7 @@ body { .header img { width: 100%; } -.header .more-information { +.header .info { font-family: fantasy, cursive; } @@ -21,7 +21,7 @@ body { .header { text-align: center; } } -.centered-main-page-element { +.main { display: block; width: 500px; margin: 0 auto 0; @@ -31,7 +31,7 @@ body { display: inline-block; flex-grow: 1 } -.task-row-wrapper { +.wrapper { display: flex; } ul { From f6bf087528acb2b6c7b53a40ccb55ef9f732e614 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 22:56:30 +0500 Subject: [PATCH 13/29] refactor: replace tag selectors with class and id selectors according to rule 3.4 in html-and-css.md --- app.js | 22 ++++++++++++-------- index.html | 60 +++++++++++++++++++++++++++--------------------------- style.css | 48 +++++++++++++++++++++---------------------- 3 files changed, 67 insertions(+), 63 deletions(-) diff --git a/app.js b/app.js index 15242433594..449b8671ad7 100644 --- a/app.js +++ b/app.js @@ -32,18 +32,22 @@ var createNewTaskElement=function(taskString){ var deleteButton=document.createElement("button");//delete button var deleteButtonImg=document.createElement("img");//delete button image + listItem.className="list-itm"; + label.innerText=taskString; - label.className="task"; + label.className="task task-name"; //Each elements, needs appending checkBox.type="checkbox"; + checkBox.className="input input-checkbox"; editInput.type="text"; - editInput.className="task"; + editInput.className="input input-txt task"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit-task"; + editButton.className="btn edit-task"; - deleteButton.className="delete-task"; + deleteButton.className="btn delete-task"; + deleteButtonImg.className="ico"; deleteButtonImg.src="./remove.svg"; deleteButton.appendChild(deleteButtonImg); @@ -82,8 +86,8 @@ var editTask=function(){ var listItem=this.parentNode; - var editInput=listItem.querySelector("input[type=text]"); - var label=listItem.querySelector("label"); + var editInput=listItem.querySelector(".input-txt"); + var label=listItem.querySelector(".task-name"); var editBtn=listItem.querySelector(".edit-task"); var containsClass=listItem.classList.contains("edit-mode"); //If class of the parent is .edit-mode @@ -155,9 +159,9 @@ 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-task"); - var deleteButton=taskListItem.querySelector("button.delete-task"); + var checkBox=taskListItem.querySelector(".input-checkbox"); + var editButton=taskListItem.querySelector(".btn.edit-task"); + var deleteButton=taskListItem.querySelector(".btn.delete-task"); //Bind editTask to edit button. diff --git a/index.html b/index.html index 99d55b30fce..082a1cb5aba 100644 --- a/index.html +++ b/index.html @@ -5,49 +5,49 @@ - +
      - + Want more details?

      - +

      - - + +

      -

      Todo

      -
        -
      • - - - - - +
        • -
      • - - - - - +
      -

      Completed

      -
        -
      • - - - - - +
      diff --git a/style.css b/style.css index 1641e7858ff..73435d6a059 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ /* Basic Style */ -body { +.body { background-color: #f8f8f8; color: #333; font-family: Lato, sans-serif; @@ -10,7 +10,7 @@ body { display: block; text-align: right; } -.header img { +.header .img { width: 100%; } .header .info { @@ -34,17 +34,17 @@ body { .wrapper { display: flex; } -ul { +.list { margin:0; padding: 0px; } -li, h3 { +.list-itm { list-style:none; } -input,button{ +.input,.btn{ outline:none; } -button { +.btn { background: none; border: 0px; color: #888; @@ -53,12 +53,12 @@ button { font-family: Lato, sans-serif; cursor: pointer; } -button:hover { +.btn:hover { color: #3a3a3a; } /* Heading */ -h3, -label[for="new-task"] { +.title, +.new-task-name { color: #333; font-weight: 700; font-size: 15px; @@ -67,7 +67,7 @@ label[for="new-task"] { margin: 0; text-transform: uppercase; } -input[type="text"] { +.input-txt { margin: 0; font-size: 18px; line-height: 18px; @@ -79,21 +79,21 @@ input[type="text"] { font-family: Lato, sans-serif; color: #888; } -input[type="text"]:focus { +.input-txt:focus { color: #333; } /* New Task */ -label[for="new-task"] { +.new-task-name { display: block; margin: 0 0 20px; } -input#new-task { +.input#new-task { width: 318px; } /* Task list */ -li { +.list-itm { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; @@ -102,47 +102,47 @@ li { justify-content: space-between; align-items: center; } -li > * { +.list-itm > * { vertical-align: middle; } -li > input[type="checkbox"] { +.list-itm > .input-checkbox { margin: 0 10px; } -li > label { +.list-itm > .task-name { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { +.list-itm > .input-txt { width: 226px } -button.delete-task img { +.btn.delete-task .ico { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete-task img:hover { +.btn.delete-task .ico:hover { transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { +.list#completed-tasks .task-name { text-decoration: line-through color: #888; } /* Edit Task */ -ul li input[type=text] { +.list .list-itm .input-txt { display:none } -ul li.edit-mode input[type=text] { +.list .list-itm.edit-mode .input-txt { display:inline-block; width:224px } -ul li.edit-mode label { +.list .list-itm.edit-mode .task-name { display:none; } \ No newline at end of file From 3ad9e644238c9d59ed76de6e0d08cc156eaa0792 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 23:13:19 +0500 Subject: [PATCH 14/29] refactor: add line breaks between CSS rules for consistency reasons --- style.css | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/style.css b/style.css index 73435d6a059..820793900eb 100644 --- a/style.css +++ b/style.css @@ -1,49 +1,62 @@ /* Basic Style */ + .body { background-color: #f8f8f8; color: #333; font-family: Lato, sans-serif; } + .header { width: 500px; margin: 0 auto; display: block; text-align: right; } + .header .img { width: 100%; } + .header .info { font-family: fantasy, cursive; } @media (max-width:768px) { + .header { text-align: center; } + } + .main { display: block; width: 500px; margin: 0 auto 0; } + .task { width: 56%; display: inline-block; flex-grow: 1 } + .wrapper { display: flex; } + .list { margin:0; padding: 0px; } + .list-itm { list-style:none; } + .input,.btn{ outline:none; } + .btn { background: none; border: 0px; @@ -53,10 +66,13 @@ font-family: Lato, sans-serif; cursor: pointer; } + .btn:hover { color: #3a3a3a; } + /* Heading */ + .title, .new-task-name { color: #333; @@ -67,6 +83,7 @@ margin: 0; text-transform: uppercase; } + .input-txt { margin: 0; font-size: 18px; @@ -79,20 +96,24 @@ font-family: Lato, sans-serif; color: #888; } + .input-txt:focus { color: #333; } /* New Task */ + .new-task-name { display: block; margin: 0 0 20px; } + .input#new-task { width: 318px; } /* Task list */ + .list-itm { overflow: hidden; padding: 20px 0; @@ -102,6 +123,7 @@ justify-content: space-between; align-items: center; } + .list-itm > * { vertical-align: middle; } @@ -109,31 +131,37 @@ .list-itm > .input-checkbox { margin: 0 10px; } + .list-itm > .task-name { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } + .list-itm > .input-txt { width: 226px } + .btn.delete-task .ico { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } + .btn.delete-task .ico:hover { transform: rotateZ(0); } /* Completed */ + .list#completed-tasks .task-name { text-decoration: line-through color: #888; } /* Edit Task */ + .list .list-itm .input-txt { display:none } From 509ec6f270c375f9014c740c037a5520f40d06ab Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sat, 22 Apr 2023 23:18:12 +0500 Subject: [PATCH 15/29] refactor: remove unwanted blank line inside CSS block for consistency reasons --- style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/style.css b/style.css index 820793900eb..0d5d6993ed5 100644 --- a/style.css +++ b/style.css @@ -118,7 +118,6 @@ overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; - display: flex; justify-content: space-between; align-items: center; From c728ab1c0449c89d6786a6b2bd6f0cb00c9d0e9f Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 01:01:30 +0500 Subject: [PATCH 16/29] refactor: add block content indentation in CSS according to rule 3.5 in html-and-css.md --- style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 0d5d6993ed5..721bdb64774 100644 --- a/style.css +++ b/style.css @@ -23,8 +23,9 @@ @media (max-width:768px) { -.header { text-align: center; -} + .header { + text-align: center; + } } From b48c11ff39ac0447b78a97c741fa688e9ce02c1d Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 01:17:02 +0500 Subject: [PATCH 17/29] refactor: add space after a property name's colon in CSS according to rule 3.6 in html-and-css.md --- style.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/style.css b/style.css index 721bdb64774..5db314d4bd6 100644 --- a/style.css +++ b/style.css @@ -21,7 +21,7 @@ font-family: fantasy, cursive; } -@media (max-width:768px) { +@media (max-width: 768px) { .header { text-align: center; @@ -46,16 +46,16 @@ } .list { - margin:0; + margin: 0; padding: 0px; } .list-itm { - list-style:none; + list-style: none; } .input,.btn{ - outline:none; + outline: none; } .btn { @@ -163,14 +163,14 @@ /* Edit Task */ .list .list-itm .input-txt { - display:none + display: none } .list .list-itm.edit-mode .input-txt { - display:inline-block; - width:224px + display: inline-block; + width: 224px } .list .list-itm.edit-mode .task-name { - display:none; + display: none; } \ No newline at end of file From 157462bbeecc1f18c864f4d466c9789ec73653ff Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 01:29:35 +0500 Subject: [PATCH 18/29] refactor: add semicolon after every declaration in CSS according to rule 3.7 in html-and-css.md --- style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style.css b/style.css index 5db314d4bd6..84fcebf2c67 100644 --- a/style.css +++ b/style.css @@ -38,7 +38,7 @@ .task { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .wrapper { @@ -140,7 +140,7 @@ } .list-itm > .input-txt { - width: 226px + width: 226px; } .btn.delete-task .ico { @@ -156,19 +156,19 @@ /* Completed */ .list#completed-tasks .task-name { - text-decoration: line-through + text-decoration: line-through; color: #888; } /* Edit Task */ .list .list-itm .input-txt { - display: none + display: none; } .list .list-itm.edit-mode .input-txt { display: inline-block; - width: 224px + width: 224px; } .list .list-itm.edit-mode .task-name { From ce8a8b0dfe3fc6008744e42af6993518d45d4680 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 01:50:58 +0500 Subject: [PATCH 19/29] refactor: add line break for each selector and declaration in CSS according to rule 3.8 in html-and-css.md --- style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 84fcebf2c67..11a16d602b5 100644 --- a/style.css +++ b/style.css @@ -54,7 +54,8 @@ list-style: none; } -.input,.btn{ +.input, +.btn{ outline: none; } From 96f642078cc56270d9e7d9b797a13668214e300a Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 01:56:03 +0500 Subject: [PATCH 20/29] refactor: add space between last selector and declaration block in CSS for consistency reasons --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 11a16d602b5..e1dbd74bc1d 100644 --- a/style.css +++ b/style.css @@ -55,7 +55,7 @@ } .input, -.btn{ +.btn { outline: none; } From cb23959149abd3455c003d21bd9d88ed8403b5a6 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 02:35:10 +0500 Subject: [PATCH 21/29] refactor: change font in header to match reference screenshot in ReadMe.md --- style.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index e1dbd74bc1d..6ba6af03a5b 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,5 @@ +@import url("https://fonts.cdnfonts.com/css/papyrus"); + /* Basic Style */ .body { @@ -18,7 +20,10 @@ } .header .info { - font-family: fantasy, cursive; + font-family: Papyrus, sans-serif; + font-weight: 700; + font-size: 17px; + letter-spacing: 1.95px; } @media (max-width: 768px) { From 56bf363fcc626757fe8c27525e2dbd2f182453ef Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 02:56:17 +0500 Subject: [PATCH 22/29] refactor: add semantic HTML5 elements according to rule 1.1 in html-and-css-extended.md --- index.html | 84 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 44 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 082a1cb5aba..e0e9ebd9f69 100644 --- a/index.html +++ b/index.html @@ -6,52 +6,56 @@ -
      +
      Want more details? -
      -
      -

      - + +

      +
      +

      Add Item

      -

      -

      Todo

      -
        -
      • - - - - - -
        • -
      • - - - - - -
        • -
      -

      Completed

      -
        -
      • - - - - - -
        • -
      -
      + +
      +

      Todo

      +
        +
      • + + + + + +
        • +
      • + + + + + +
        • +
      +
      +
      +

      Completed

      +
        +
      • + + + + + +
        • +
      +
      + \ No newline at end of file From 6e010094b69db962dd3ac59f5f1b500b10929e4b Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 03:21:59 +0500 Subject: [PATCH 23/29] refactor: add alternative contents for multimedia according to rule 1.2 in html-and-css-extended.md --- app.js | 1 + index.html | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index 449b8671ad7..3d94330ccf1 100644 --- a/app.js +++ b/app.js @@ -48,6 +48,7 @@ var createNewTaskElement=function(taskString){ deleteButton.className="btn delete-task"; deleteButtonImg.className="ico"; + deleteButtonImg.alt="remove"; deleteButtonImg.src="./remove.svg"; deleteButton.appendChild(deleteButtonImg); diff --git a/index.html b/index.html index e0e9ebd9f69..ff0efb3ad61 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@
      - + eisenhower matrix Want more details?
      @@ -27,7 +27,7 @@

      Todo

    • @@ -36,7 +36,7 @@

      Todo

    @@ -50,7 +50,7 @@

    Completed

From c52f3d38a6bfd8b6120f2aaa9ca8276f1f8c157c Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 03:31:52 +0500 Subject: [PATCH 24/29] fix: add space between attributes to make HTML valid --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index ff0efb3ad61..f5b849ee72d 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

Add Item

- +
From b1aae1fd80a6a817ced68fe63b189cc773b3b920 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Sun, 23 Apr 2023 04:05:56 +0500 Subject: [PATCH 25/29] refactor: remove unused extra id from HTML to improve codebase --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f5b849ee72d..f2a0a0f0b60 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ Want more details?
-
+

Add Item

From 972e6d41c2e8797cc51db2a416f447c21a07f9cb Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Mon, 24 Apr 2023 22:01:39 +0500 Subject: [PATCH 26/29] refactor: rename classes following the BEM methodology according to rule 2.1 in html-and-css-extended.md --- app.js | 30 +++++++++++------------ index.html | 68 +++++++++++++++++++++++++-------------------------- style.css | 72 +++++++++++++++++++++++------------------------------- 3 files changed, 79 insertions(+), 91 deletions(-) diff --git a/app.js b/app.js index 3d94330ccf1..39a920a5a5c 100644 --- a/app.js +++ b/app.js @@ -32,22 +32,22 @@ var createNewTaskElement=function(taskString){ var deleteButton=document.createElement("button");//delete button var deleteButtonImg=document.createElement("img");//delete button image - listItem.className="list-itm"; + listItem.className="list__item"; label.innerText=taskString; - label.className="task task-name"; + label.className="list__label label label_text"; //Each elements, needs appending checkBox.type="checkbox"; - checkBox.className="input input-checkbox"; + checkBox.className="list__input input input_checkbox"; editInput.type="text"; - editInput.className="input input-txt task"; + editInput.className="list__input input input_text"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="btn edit-task"; + editButton.className="list__button button button_edit"; - deleteButton.className="btn delete-task"; - deleteButtonImg.className="ico"; + deleteButton.className="list__button button button_remove"; + deleteButtonImg.className="button_icon icon"; deleteButtonImg.alt="remove"; deleteButtonImg.src="./remove.svg"; deleteButton.appendChild(deleteButtonImg); @@ -87,10 +87,10 @@ var editTask=function(){ var listItem=this.parentNode; - var editInput=listItem.querySelector(".input-txt"); - var label=listItem.querySelector(".task-name"); - var editBtn=listItem.querySelector(".edit-task"); - var containsClass=listItem.classList.contains("edit-mode"); + var editInput=listItem.querySelector(".input_text"); + var label=listItem.querySelector(".label_text"); + var editBtn=listItem.querySelector(".button_edit"); + var containsClass=listItem.classList.contains("list__item_edit"); //If class of the parent is .edit-mode if(containsClass){ @@ -104,7 +104,7 @@ var editTask=function(){ } //toggle .edit-mode on the parent. - listItem.classList.toggle("edit-mode"); + listItem.classList.toggle("list__item_edit"); }; @@ -160,9 +160,9 @@ addButton.addEventListener("click",ajaxRequest); var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ console.log("bind list item events"); //select ListItems children - var checkBox=taskListItem.querySelector(".input-checkbox"); - var editButton=taskListItem.querySelector(".btn.edit-task"); - var deleteButton=taskListItem.querySelector(".btn.delete-task"); + var checkBox=taskListItem.querySelector(".input_checkbox"); + var editButton=taskListItem.querySelector(".button.button_edit"); + var deleteButton=taskListItem.querySelector(".button.button_remove"); //Bind editTask to edit button. diff --git a/index.html b/index.html index f2a0a0f0b60..7e0fd31e0c3 100644 --- a/index.html +++ b/index.html @@ -7,50 +7,50 @@
- eisenhower matrix - Want more details? + eisenhower matrix + Want more details?
-
-

Add Item

-
- - +
+

Add Item

+
+ +
-
-

Todo

-
    -
  • - - - - - +
    • -
  • - - - - - +
-
-

Completed

-
    -
  • - - - - - +
diff --git a/style.css b/style.css index 6ba6af03a5b..194b1ccbe1e 100644 --- a/style.css +++ b/style.css @@ -15,11 +15,11 @@ text-align: right; } -.header .img { +.header__img { width: 100%; } -.header .info { +.header__info { font-family: Papyrus, sans-serif; font-weight: 700; font-size: 17px; @@ -40,13 +40,14 @@ margin: 0 auto 0; } -.task { +.input_text, +.label { width: 56%; display: inline-block; flex-grow: 1; } -.wrapper { +.section__container { display: flex; } @@ -55,16 +56,22 @@ padding: 0px; } -.list-itm { +.list__item { list-style: none; + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; + display: flex; + justify-content: space-between; + align-items: center; } .input, -.btn { +.button { outline: none; } -.btn { +.button { background: none; border: 0px; color: #888; @@ -74,14 +81,13 @@ cursor: pointer; } -.btn:hover { +.button:hover { color: #3a3a3a; } /* Heading */ -.title, -.new-task-name { +.section__title { color: #333; font-weight: 700; font-size: 15px; @@ -91,7 +97,7 @@ text-transform: uppercase; } -.input-txt { +.input_text { margin: 0; font-size: 18px; line-height: 18px; @@ -102,81 +108,63 @@ border-radius: 6px; font-family: Lato, sans-serif; color: #888; + width: 226px; + display: none; } -.input-txt:focus { +.input_text:focus { color: #333; } /* New Task */ -.new-task-name { +.title_add { display: block; margin: 0 0 20px; } -.input#new-task { +.input_add { width: 318px; + display: inline-block; } /* Task list */ -.list-itm { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - align-items: center; -} - -.list-itm > * { - vertical-align: middle; -} - -.list-itm > .input-checkbox { +.input_checkbox { margin: 0 10px; } -.list-itm > .task-name { +.label_text { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -.list-itm > .input-txt { - width: 226px; -} - -.btn.delete-task .ico { +.button_icon { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -.btn.delete-task .ico:hover { +.button_icon:hover { transform: rotateZ(0); } /* Completed */ -.list#completed-tasks .task-name { +.list_done .label_text { text-decoration: line-through; color: #888; } /* Edit Task */ -.list .list-itm .input-txt { - display: none; -} - -.list .list-itm.edit-mode .input-txt { +.list__item_edit .input_text { display: inline-block; width: 224px; } -.list .list-itm.edit-mode .task-name { +.list__item_edit .label_text { display: none; } \ No newline at end of file From ed068e817675e666325a53f5fbf0755c780e1778 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Tue, 25 Apr 2023 04:24:32 +0500 Subject: [PATCH 27/29] fix: fix typo in class name --- app.js | 2 +- index.html | 8 ++++---- style.css | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index 39a920a5a5c..31b67a8618b 100644 --- a/app.js +++ b/app.js @@ -47,7 +47,7 @@ var createNewTaskElement=function(taskString){ editButton.className="list__button button button_edit"; deleteButton.className="list__button button button_remove"; - deleteButtonImg.className="button_icon icon"; + deleteButtonImg.className="button__icon icon"; deleteButtonImg.alt="remove"; deleteButtonImg.src="./remove.svg"; deleteButton.appendChild(deleteButtonImg); diff --git a/index.html b/index.html index 7e0fd31e0c3..db6d3bed534 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

Todo

  • @@ -36,21 +36,21 @@

    Todo

    • Completed

    -
      +
      diff --git a/style.css b/style.css index 194b1ccbe1e..9bdd05673ad 100644 --- a/style.css +++ b/style.css @@ -141,13 +141,13 @@ width: 226px; } -.button_icon { +.button__icon { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -.button_icon:hover { +.button__icon:hover { transform: rotateZ(0); } From a53bda748958e416aeda07f48dd4cc582a098858 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Tue, 25 Apr 2023 04:26:53 +0500 Subject: [PATCH 28/29] refactor: remove empty g tags from SVG to reduce file size --- remove.svg | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/remove.svg b/remove.svg index 4a527ef5a8e..6804259602a 100644 --- a/remove.svg +++ b/remove.svg @@ -13,34 +13,4 @@ c-4.8-4.8-12.5-4.8-17.3,0s-4.8,12.5,0,17.3l47.8,47.8l-47.8,47.8C220.725,297.263,220.725,304.962,225.425,309.763z"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 5dbe92c9c32bdbd5a5b1def30d370af7f2192da6 Mon Sep 17 00:00:00 2001 From: InventiveSpark Date: Tue, 25 Apr 2023 04:34:28 +0500 Subject: [PATCH 29/29] refactor: use let or const instead of var in JS --- app.js | 68 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/app.js b/app.js index 31b67a8618b..31554e9c8c3 100644 --- a/app.js +++ b/app.js @@ -8,29 +8,29 @@ // 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 +const taskInput=document.getElementById("new-task");//Add a new task. +const addButton=document.getElementsByTagName("button")[0];//first button +const incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks +const completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks //New task list item -var createNewTaskElement=function(taskString){ +const createNewTaskElement=function(taskString){ - var listItem=document.createElement("li"); + const listItem=document.createElement("li"); //input (checkbox) - var checkBox=document.createElement("input");//checkbx + const checkBox=document.createElement("input");//checkbx //label - var label=document.createElement("label");//label + const label=document.createElement("label");//label //input (text) - var editInput=document.createElement("input");//text + const editInput=document.createElement("input");//text //button.edit - var editButton=document.createElement("button");//edit button + const editButton=document.createElement("button");//edit button //button.delete - var deleteButton=document.createElement("button");//delete button - var deleteButtonImg=document.createElement("img");//delete button image + const deleteButton=document.createElement("button");//delete button + const deleteButtonImg=document.createElement("img");//delete button image listItem.className="list__item"; @@ -64,11 +64,11 @@ var createNewTaskElement=function(taskString){ -var addTask=function(){ +const 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); + const listItem=createNewTaskElement(taskInput.value); //Append listItem to incompleteTaskHolder incompleteTaskHolder.appendChild(listItem); @@ -80,17 +80,17 @@ var addTask=function(){ //Edit an existing task. -var editTask=function(){ +const editTask=function(){ console.log("Edit Task..."); console.log("Change 'edit' to 'save'"); - var listItem=this.parentNode; + const listItem=this.parentNode; - var editInput=listItem.querySelector(".input_text"); - var label=listItem.querySelector(".label_text"); - var editBtn=listItem.querySelector(".button_edit"); - var containsClass=listItem.classList.contains("list__item_edit"); + const editInput=listItem.querySelector(".input_text"); + const label=listItem.querySelector(".label_text"); + const editBtn=listItem.querySelector(".button_edit"); + const containsClass=listItem.classList.contains("list__item_edit"); //If class of the parent is .edit-mode if(containsClass){ @@ -109,11 +109,11 @@ var editTask=function(){ //Delete task. -var deleteTask=function(){ +const deleteTask=function(){ console.log("Delete Task..."); - var listItem=this.parentNode; - var ul=listItem.parentNode; + const listItem=this.parentNode; + const ul=listItem.parentNode; //Remove the parent list item from the ul. ul.removeChild(listItem); @@ -121,30 +121,30 @@ var deleteTask=function(){ //Mark task completed -var taskCompleted=function(){ +const taskCompleted=function(){ console.log("Complete Task..."); //Append the task list item to the #completed-tasks - var listItem=this.parentNode; + const listItem=this.parentNode; completedTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskIncomplete); } -var taskIncomplete=function(){ +const taskIncomplete=function(){ console.log("Incomplete Task..."); //Mark task as incomplete. //When the checkbox is unchecked //Append the task list item to the #incomplete-tasks. - var listItem=this.parentNode; + const listItem=this.parentNode; incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem,taskCompleted); } -var ajaxRequest=function(){ +const ajaxRequest=function(){ console.log("AJAX Request"); } @@ -157,12 +157,12 @@ addButton.addEventListener("click",addTask); addButton.addEventListener("click",ajaxRequest); -var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ +const bindTaskEvents=function(taskListItem,checkBoxEventHandler){ console.log("bind list item events"); //select ListItems children - var checkBox=taskListItem.querySelector(".input_checkbox"); - var editButton=taskListItem.querySelector(".button.button_edit"); - var deleteButton=taskListItem.querySelector(".button.button_remove"); + const checkBox=taskListItem.querySelector(".input_checkbox"); + const editButton=taskListItem.querySelector(".button.button_edit"); + const deleteButton=taskListItem.querySelector(".button.button_remove"); //Bind editTask to edit button. @@ -175,7 +175,7 @@ var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ //cycle over incompleteTaskHolder ul list items //for each list item -for (var i=0; i