From 2b4f72a01e1e97b05b09060c4b399b7c600b9d1d Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Sun, 15 Dec 2024 19:10:38 +0300 Subject: [PATCH 01/25] refactor(basic-1.1): change indentations for 2 spaces --- style.css | 148 +++++++++++++++++++++++++++--------------------------- 1 file changed, 74 insertions(+), 74 deletions(-) diff --git a/style.css b/style.css index ab36227705..c5d44bdc43 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,148 @@ /* Basic Style */ body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; } .aaa { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; + width: 500px; + margin: 0 auto; + display: block; + text-align: right; } .aaa img { - width: 100%; + width: 100%; } .aaa .more_inf { - font-family: fantasy, cursive; + font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { text-align: center; +.aaa { + text-align: center; } } .centered-main-page-element { - display: block; - width: 500px; - margin: 0 auto 0; + display: block; + width: 500px; + margin: 0 auto 0; } .task { - width: 56%; - display: inline-block; - flex-grow: 1 + width: 56%; + display: inline-block; + flex-grow: 1 } .task-row-wrapper { - display: flex; + display: flex; } ul { - margin:0; - padding: 0px; + margin:0; + padding: 0px; } li, h3 { - list-style:none; + list-style:none; } input,button{ - outline:none; + outline:none; } button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; } button:hover { - color: #3a3A3a; + color: #3a3A3a; } /* Heading */ h3, label[for='new-task'] { - color: #333; - font-weight: 700; - font-size: 15px; - border-bottom: 2px solid #333; - padding: 30px 0 10px; - margin: 0; - text-transform: uppercase; + color: #333; + font-weight: 700; + font-size: 15px; + border-bottom: 2px solid #333; + padding: 30px 0 10px; + margin: 0; + text-transform: uppercase; } input[type="text"] { - margin: 0; - font-size: 18px; - line-height: 18px; - height: 21px; - padding: 0 9px; - border: 1px solid #dDd; - background: #FFF; - border-radius: 6px; - font-family: Lato, sans-serif; - color: #888; + margin: 0; + font-size: 18px; + line-height: 18px; + height: 21px; + padding: 0 9px; + border: 1px solid #dDd; + background: #FFF; + border-radius: 6px; + font-family: Lato, sans-serif; + color: #888; } input[type="text"]:focus { - color: #333; + color: #333; } /* New Task */ label[for='new-task'] { - display: block; - margin: 0 0 20px; + display: block; + margin: 0 0 20px; } input#new-task { - width: 318px; + width: 318px; } /* Task list */ li { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; - - display: flex; - justify-content: space-between; - align-items: center; + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; + display: flex; + justify-content: space-between; + align-items: center; } li > * { - 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 308ca51fd3855a88ab177f6ff781b99aa26b1711 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Sun, 15 Dec 2024 19:19:48 +0300 Subject: [PATCH 02/25] refactor(basic-1.2): use lowercase --- index.html | 8 ++++---- style.css | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60c..ebe95af6ce 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 c5d44bdc43..28051ad437 100644 --- a/style.css +++ b/style.css @@ -55,7 +55,7 @@ button { cursor: pointer; } button:hover { - color: #3a3A3a; + color: #3a3a3a; } /* Heading */ h3, @@ -74,8 +74,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 d69608713537cbb86009f8ec0b53c60db06b4fa8 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Sun, 15 Dec 2024 19:28:07 +0300 Subject: [PATCH 03/25] refactor(basic-1.3): use double quotes instead of single quotes --- index.html | 12 ++++++------ style.css | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index ebe95af6ce..a973accbca 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 28051ad437..4bc9f410ae 100644 --- a/style.css +++ b/style.css @@ -59,7 +59,7 @@ button:hover { } /* Heading */ h3, -label[for='new-task'] { +label[for="new-task"] { color: #333; font-weight: 700; font-size: 15px; @@ -85,7 +85,7 @@ input[type="text"]:focus { } /* New Task */ -label[for='new-task'] { +label[for="new-task"] { display: block; margin: 0 0 20px; } From 32c2bbd1a359c9770eb63cf5ead73a8e763cfd33 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Sun, 15 Dec 2024 23:05:55 +0300 Subject: [PATCH 04/25] refactor(basic-2.1): format index --- index.html | 71 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index a973accbca..1827240ab6 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 5b649be136da51b3a610fc98b0122a209b42ca86 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Sun, 15 Dec 2024 23:08:16 +0300 Subject: [PATCH 05/25] refactor(basic-2.2):add doctype for index --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 1827240ab6..5d266d693d 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + Todo App From f29c48d42d0a64dbfd8adb1095b88ed0384be47d Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Sun, 15 Dec 2024 23:12:08 +0300 Subject: [PATCH 06/25] refactor(basic-2.3):replacement named character --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5d266d693d..85a0183631 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
    - Want more details? + Want more details?

    From 75913b92f8652522463d74d598f1a5fff97c4774 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Sun, 15 Dec 2024 23:15:39 +0300 Subject: [PATCH 07/25] refactor(basic-2.4):delete type --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 85a0183631..4866f1db38 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 d40bec2a55124c7870af3c081fba921f7119d16a Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Sun, 15 Dec 2024 23:20:38 +0300 Subject: [PATCH 08/25] refactor(basic-2.5):Line-Wrapping for index --- index.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4866f1db38..06f34ff27d 100644 --- a/index.html +++ b/index.html @@ -2,13 +2,17 @@ Todo App - +
- Want more details? + + Want more details? +

From 8ffaecb84d099a00ab1cb894d9627e2c07f88504 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 13:10:47 +0300 Subject: [PATCH 09/25] refactor(basic-3.1):Single style for selectors naming --- 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 ab737a6002..9351d0dce1 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 06f34ff27d..c24b8e8552 100644 --- a/index.html +++ b/index.html @@ -9,13 +9,13 @@

- Want more details?
-

+

@@ -23,7 +23,7 @@

Todo

-
    +
    • @@ -33,7 +33,7 @@

      Todo

      • -
    • +
    • diff --git a/style.css b/style.css index 4bc9f410ae..e19abc60fd 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 4bbaecb4cb6ee21d4ac4d931c0ea2ffbd0ba6133 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 13:20:04 +0300 Subject: [PATCH 10/25] refactor(basic-3.2):Meaningful naming of identifiers and classes --- app.js | 20 ++++++++++---------- index.html | 16 ++++++++-------- style.css | 10 +++++----- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/app.js b/app.js index 9351d0dce1..40595b546b 100644 --- a/app.js +++ b/app.js @@ -25,11 +25,11 @@ 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 + //button.delete-task + var deleteButton=document.createElement("button");//delete-task button var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; @@ -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,11 +156,11 @@ 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. + //Bind editTask to edit-task button. editButton.onclick=editTask; //Bind deleteTask to delete button. deleteButton.onclick=deleteTask; diff --git a/index.html b/index.html index c24b8e8552..124bdf2ed7 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,9 @@ -
      +
      - Want more details? @@ -28,8 +28,8 @@

      Todo

      - - +
      • @@ -37,8 +37,8 @@

      Todo

      - - + @@ -49,8 +49,8 @@

      Completed

      - - + diff --git a/style.css b/style.css index e19abc60fd..b789102069 100644 --- a/style.css +++ b/style.css @@ -4,13 +4,13 @@ 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 { @@ -18,7 +18,7 @@ body { } @media (max-width:768px) { -.aaa { +.header { text-align: center; } } @@ -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 8de1e29932b42980f27cd702be3c4a3b480b34df Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 13:23:03 +0300 Subject: [PATCH 11/25] refactor(basic-3.3):Keep the names of identifiers and classes concise --- index.html | 4 ++-- style.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 124bdf2ed7..7fcbc969df 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@ Want more details?
-
-

+

+

diff --git a/style.css b/style.css index b789102069..3da254d74e 100644 --- a/style.css +++ b/style.css @@ -22,7 +22,7 @@ body { text-align: center; } } -.centered-main-page-element { +.main { display: block; width: 500px; margin: 0 auto 0; From 1e1e131599a8e9bd870cf9333d76c472b23bd2b7 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 13:46:50 +0300 Subject: [PATCH 12/25] refactor(basic-3.4):replace tag selectors --- index.html | 52 ++++++++++++++++++++++++++-------------------------- style.css | 48 ++++++++++++++++++++++++------------------------ 2 files changed, 50 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index 7fcbc969df..7f3b6b4de4 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,9 @@ rel="stylesheet"> - +
- + Want more details? @@ -16,42 +16,42 @@

- +

- - + +

-

Todo

+

Todo

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

Completed

+

Completed

    -
  • - - - - - +
diff --git a/style.css b/style.css index 3da254d74e..90c6f6f84d 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%; } .aaa .more-inf { @@ -35,17 +35,17 @@ body { .task-row-wrapper { display: flex; } -ul { +#incomplete-tasks { margin:0; padding: 0px; } -li, h3 { +.task-list, .section-title { list-style:none; } -input,button{ +.input, .button{ outline:none; } -button { +.button { background: none; border: 0px; color: #888; @@ -54,12 +54,12 @@ button { font-family: Lato, sans-serif; cursor: pointer; } -button:hover { +.button:hover { color: #3a3a3a; } /* Heading */ -h3, -label[for="new-task"] { +.section-title, +.new-task-label { color: #333; font-weight: 700; font-size: 15px; @@ -68,7 +68,7 @@ label[for="new-task"] { margin: 0; text-transform: uppercase; } -input[type="text"] { +.text-input { margin: 0; font-size: 18px; line-height: 18px; @@ -80,21 +80,21 @@ input[type="text"] { font-family: Lato, sans-serif; color: #888; } -input[type="text"]:focus { +.text-input:focus { color: #333; } /* New Task */ -label[for="new-task"] { +.new-task-label { display: block; margin: 0 0 20px; } -input#new-task { +#new-task { width: 318px; } /* Task list */ -li { +.list-item { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; @@ -102,47 +102,47 @@ li { justify-content: space-between; align-items: center; } -li > * { +.list-item > * { vertical-align: middle; } -li > input[type="checkbox"] { +.list-item > .input-checkbox { margin: 0 10px; } -li > label { +.list-item > .task { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { +.list-item > .text-input { width: 226px } -button.delete-task img { +.delete-img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete-task img:hover { +.delete-img:hover { transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { +.completed-task-label { text-decoration: line-through color: #888; } /* Edit Task */ -ul li input[type=text] { +.hidden { display:none } -ul li.edit-Mode input[type=text] { +.edit-mode .text-input { display:inline-block; width:224px } -ul li.edit-Mode label { +.edit-mode .task-label { display:none; } \ No newline at end of file From 9f629b4b5e2a3c99b67e5dffdbf526dfcc7b5901 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 13:53:40 +0300 Subject: [PATCH 13/25] refactor(basic-3.5):add indentation in blocks --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 90c6f6f84d..5d642f730b 100644 --- a/style.css +++ b/style.css @@ -19,7 +19,7 @@ @media (max-width:768px) { .header { - text-align: center; + text-align:center; } } .main { From b520e48163a39d2f11d383abd4ece93778b4417d Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 13:56:23 +0300 Subject: [PATCH 14/25] refactor(basic-3.6):add space after names --- style.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/style.css b/style.css index 5d642f730b..29e398be62 100644 --- a/style.css +++ b/style.css @@ -17,9 +17,9 @@ font-family: fantasy, cursive; } -@media (max-width:768px) { +@media (max-width: 768px) { .header { - text-align:center; + text-align: center; } } .main { @@ -36,14 +36,14 @@ display: flex; } #incomplete-tasks { - margin:0; + margin: 0; padding: 0px; } .task-list, .section-title { - list-style:none; + list-style: none; } .input, .button{ - outline:none; + outline: none; } .button { background: none; @@ -135,14 +135,14 @@ /* Edit Task */ .hidden { - display:none + display: none } .edit-mode .text-input { - display:inline-block; - width:224px + display: inline-block; + width: 224px } .edit-mode .task-label { - display:none; + display: none; } \ No newline at end of file From 8216b91422c98b2454bca03d928d8659a40b3a25 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 13:57:38 +0300 Subject: [PATCH 15/25] refactor(basic-3.7):add semicolon --- style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style.css b/style.css index 29e398be62..a5606e7154 100644 --- a/style.css +++ b/style.css @@ -30,7 +30,7 @@ .task { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-row-wrapper { display: flex; @@ -116,7 +116,7 @@ width: 226px; } .list-item > .text-input { - width: 226px + width: 226px; } .delete-img { height: 2em; @@ -129,18 +129,18 @@ /* Completed */ .completed-task-label { - text-decoration: line-through + text-decoration: line-through; color: #888; } /* Edit Task */ .hidden { - display: none + display: none; } .edit-mode .text-input { display: inline-block; - width: 224px + width: 224px; } .edit-mode .task-label { From dc9c92691e0cf30c148c5e86063f4d6994c17142 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 14:02:19 +0300 Subject: [PATCH 16/25] refactor(basic-3.8):separate selectors and properties --- style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index a5606e7154..1e478fea82 100644 --- a/style.css +++ b/style.css @@ -39,10 +39,12 @@ margin: 0; padding: 0px; } -.task-list, .section-title { +.task-list, +.section-title { list-style: none; } -.input, .button{ +.input, +.button{ outline: none; } .button { From c3ec588df9bf79c601ad6aea4e8d7c5997acaa95 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 14:48:04 +0300 Subject: [PATCH 17/25] refactor(advanced-1.1):add semantic tags --- index.html | 82 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index 7f3b6b4de4..8e7fadb1ba 100644 --- a/index.html +++ b/index.html @@ -7,55 +7,59 @@ -
+
Want more details? -
-
-

- + +

+
+

Add Item

-

-

Todo

-
    -
  • - - - - - +
+
+

Todo

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

Completed

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

Completed

-
    -
  • - - - - - -
    • -
-
+ + + \ No newline at end of file From fb829eb6162cb754e7b21beeeb7d5939870a181d Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 14:53:24 +0300 Subject: [PATCH 18/25] refactor(advanced-1.2):add media alt --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 8e7fadb1ba..96ca494a94 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
- + Matrix-picture Want more details? @@ -31,7 +31,7 @@

Todo

  • @@ -40,7 +40,7 @@

    Todo

    • @@ -54,7 +54,7 @@

    Completed

    From c10ef44fd4277066360600c38cff2e675a943c89 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 15:30:00 +0300 Subject: [PATCH 19/25] refactor(advanced-1.3):bem natation --- index.html | 68 ++++++++++++++++++++++++------------------------- style.css | 75 +++++++++++++++++++++++++----------------------------- 2 files changed, 69 insertions(+), 74 deletions(-) diff --git a/index.html b/index.html index 96ca494a94..4b55b8ca24 100644 --- a/index.html +++ b/index.html @@ -8,53 +8,53 @@
    - Matrix-picture - + Want more details?
    -
    -

    Add Item

    -
    - - +
    +

    Add Item

    +
    + +
    -

    Todo

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

    Completed

    -
      -
    • - - - - - +
    diff --git a/style.css b/style.css index 1e478fea82..7e76eeed3d 100644 --- a/style.css +++ b/style.css @@ -10,10 +10,10 @@ display: block; text-align: right; } -.header-img { +.header__img { width: 100%; } -.aaa .more-inf { +.aaa .header__link { font-family: fantasy, cursive; } @@ -27,27 +27,27 @@ width: 500px; margin: 0 auto 0; } -.task { +.task-label, +.task-input { width: 56%; display: inline-block; flex-grow: 1; } -.task-row-wrapper { +.add-section__content { display: flex; } -#incomplete-tasks { +.todo-section__content, +.complete-section__content { margin: 0; padding: 0px; } -.task-list, -.section-title { - list-style: none; -} -.input, -.button{ +.task-input, +.todo-section__task-chekbox, +.todo-section__edit-chekbox, +.complete-section__list-checkbox { outline: none; } -.button { +.task-button { background: none; border: 0px; color: #888; @@ -55,13 +55,14 @@ width: 60px; font-family: Lato, sans-serif; cursor: pointer; + outline: none; } -.button:hover { - color: #3a3a3a; +.task-button:hover { + color: #3a3A3a; } /* Heading */ -.section-title, -.new-task-label { +.todo-section__header, +.complete-section__header { color: #333; font-weight: 700; font-size: 15px; @@ -70,81 +71,75 @@ margin: 0; text-transform: uppercase; } -.text-input { +.add-section__header { margin: 0; font-size: 18px; line-height: 18px; - height: 21px; + height: 19px; 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; + width: 226px; } -.text-input:focus { +.task-input:focus { color: #333; } /* New Task */ -.new-task-label { - display: block; - margin: 0 0 20px; -} -#new-task { +.add-section__input { width: 318px; } /* Task list */ -.list-item { +.list { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; + list-style: none; display: flex; justify-content: space-between; align-items: center; -} -.list-item > * { vertical-align: middle; } -.list-item > .input-checkbox { +.checkbox { margin: 0 10px; } -.list-item > .task { +.task-label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -.list-item > .text-input { - width: 226px; -} -.delete-img { + +.delete-btn__img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -.delete-img:hover { +.delete-btn__img:hover { transform: rotateZ(0); } /* Completed */ -.completed-task-label { +.completed-section__list .task-label { text-decoration: line-through; color: #888; } /* Edit Task */ -.hidden { +.list .task-input { display: none; } -.edit-mode .text-input { +.todo-section__edit .task-input { display: inline-block; width: 224px; } -.edit-mode .task-label { +.todo-section__edit .task-label { display: none; } \ No newline at end of file From f6031868cef11c13d798ee801a41dbadf231bab2 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 15:31:51 +0300 Subject: [PATCH 20/25] fix(with no rule):fix doctype tag --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 4b55b8ca24..da39c78d72 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + Todo App From f78fe5de427e7a455945e3b4a4c6389118610b0a Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 15:32:33 +0300 Subject: [PATCH 21/25] fix(with no rule):fix html tag --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index da39c78d72..5ac4466aeb 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Todo App Date: Mon, 16 Dec 2024 15:35:25 +0300 Subject: [PATCH 22/25] add meta tags --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5ac4466aeb..4146fce383 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,12 @@ + + Todo App - +
    From 26750be87592bfb60f5e5f81b8b5812bcab0dd2c Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 15:39:13 +0300 Subject: [PATCH 23/25] refactor(basic-2.5): add html line-wrapping --- index.html | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 4146fce383..88af96db01 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,11 @@
    - Matrix-picture + Matrix-picture Want more details? @@ -20,7 +24,10 @@

    Add Item

    - +
    @@ -28,7 +35,10 @@

    Add Item

    Todo

    • - + @@ -37,7 +47,10 @@

      Todo

    • - + From c8d25b3b7f18971a9ff798c52c3b09665f1907d3 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 15:41:21 +0300 Subject: [PATCH 24/25] refactor(basic-2.5): add html line-wrapping --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 88af96db01..065a74e9f7 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,10 @@

      Todo

      Completed

      • - + From 8998c42f7ea78e8e6f27ba33448cc1c728728850 Mon Sep 17 00:00:00 2001 From: Alex4421 Date: Mon, 16 Dec 2024 16:07:34 +0300 Subject: [PATCH 25/25] refactor(with no rule):refactor app.js --- app.js | 220 +++++++++++++++++++++++++++++---------------------------- 1 file changed, 112 insertions(+), 108 deletions(-) diff --git a/app.js b/app.js index 40595b546b..c6ee8472df 100644 --- a/app.js +++ b/app.js @@ -8,139 +8,143 @@ // Event handling, user interaction is what starts the code execution. -var taskInput=document.getElementById("new-task");//Add a new task. +var taskInput=document.querySelector(".add-section__input");//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 +var incompleteTaskHolder=document.querySelector(".todo-section__content");//ul of .todo-section__content +var completedTasksHolder=document.querySelector(".complete-section__content");//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-task - var editButton=document.createElement("button");//edit-task button - - //button.delete-task - var deleteButton=document.createElement("button");//delete-task 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-task"; - - deleteButton.className="delete-task"; - 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.classList.add("list"); + //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 + deleteButtonImg.className='delete-btn__img'; + + label.innerText=taskString; + label.className='task-label'; + + //Each elements, needs appending + checkBox.type="checkbox"; + checkBox.className="checkbox"; + editInput.type="text"; + editInput.className="task-input"; + + editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. + editButton.className="edit-btn task-button"; + + deleteButton.className="delete-btn task-button"; + 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 .add-section__input: + 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-task"); - var containsClass=listItem.classList.contains("edit-Mode"); - //If class of the parent is .edit-mode - if(containsClass){ - - //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 .edit-mode on the parent. - listItem.classList.toggle("edit-Mode"); + console.log("Edit Task..."); + console.log("Change 'edit' to 'save'"); + + + var listItem=this.parentNode; + + var editInput=listItem.querySelector('.task-input'); + var label=listItem.querySelector("label"); + var editBtn=listItem.querySelector(".edit-btn"); + var containsClass=listItem.classList.contains("todo-section__edit"); + //If class of the parent is .todo-section__edit + if(containsClass){ + + //switch to .todo-section__edit + //label becomes the inputs value. + label.innerText=editInput.value; + editBtn.innerText="Edit"; + }else{ + editInput.value=label.innerText; + editBtn.innerText="Save"; + } + + //toggle .todo-section__edit on the parent. + listItem.classList.toggle("todo-section__edit"); }; //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 .complete-section__content + var listItem=this.parentNode; + completedTasksHolder.appendChild(listItem); + listItem.classList.add('complete-section__list'); + 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 #incomplete-Tasks. - 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 .todo-section__content. + var listItem=this.parentNode; + listItem.classList.remove('complete-section__list'); + 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 +157,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-task"); - var deleteButton=taskListItem.querySelector("button.delete-task"); - - - //Bind editTask to edit-task 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(".checkbox"); + var editButton=taskListItem.querySelector("button.edit-btn"); + var deleteButton=taskListItem.querySelector("button.delete-btn"); + + + //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