From 19990a79b541bb1c49eb01d4ee1521ccb9e84609 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Sat, 22 Apr 2023 23:48:40 +0300 Subject: [PATCH 01/17] refactor(basic-1.1): replace the tab by two spaces --- style.css | 144 +++++++++++++++++++++++++++--------------------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/style.css b/style.css index ab36227705e..8bf81d3688c 100644 --- a/style.css +++ b/style.css @@ -1,20 +1,20 @@ /* 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) { @@ -22,127 +22,127 @@ body { } } .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; + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - align-items: center; + 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 15be2217ca5ded9dbdce8f80346adf050583d041 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Sun, 23 Apr 2023 00:11:28 +0300 Subject: [PATCH 02/17] refactor(basic-1.2): change all the code to lowercase --- 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 6ef24346a607ab8c444748825621e6debb0f32e3 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Sun, 23 Apr 2023 00:23:51 +0300 Subject: [PATCH 03/17] refactor(basic-1.3): change the double quotes to single quotes --- index.html | 12 ++++++------ style.css | 8 ++++---- 2 files changed, 10 insertions(+), 10 deletions(-) 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..6154bae3169 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; } @@ -134,11 +134,11 @@ ul#completed-tasks label { } /* Edit Task */ -ul li input[type=text] { +ul li input[type="text"] { display:none } -ul li.editMode input[type=text] { +ul li.editMode input[type="text"] { display:inline-block; width:224px } From 28a84624f3d5dbb6a9edfc6746c6e769ca067f88 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Sun, 23 Apr 2023 00:47:05 +0300 Subject: [PATCH 04/17] refactor(basic-2.1): add a ladder of nesting elements --- 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 870b15986639256cf7e76ec630424dbdd9177c1c Mon Sep 17 00:00:00 2001 From: ly4ik Date: Sun, 23 Apr 2023 00:50:29 +0300 Subject: [PATCH 05/17] fix(basic-2.2): add html5 DOCTYPE tag --- 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 208be1a97c3e9ec677157d9f7bbdc3c3f044fd8d Mon Sep 17 00:00:00 2001 From: ly4ik Date: Sun, 23 Apr 2023 22:59:18 +0300 Subject: [PATCH 06/17] refactor(basic-2.3): change the mnemonic symbols --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 448acb9ee1c..7b2bc79d9de 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
    - Want more details? + Want more details?

    From a14318393d2e49ac5a05f56faaf91da979f15bbc Mon Sep 17 00:00:00 2001 From: ly4ik Date: Sun, 23 Apr 2023 23:22:17 +0300 Subject: [PATCH 07/17] refactor(basic-2.4): delete attridute 'type' in script and link elements --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 7b2bc79d9de..392479c90b1 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Todo App - +

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

    Completed

- + \ No newline at end of file From 0aba3758a22312f409e2806161b0025aa811cfc3 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Mon, 24 Apr 2023 21:49:39 +0300 Subject: [PATCH 08/17] refactor(extended-2.1, basic-3.1-3.4): update CSS according to BEM --- app.js | 30 ++++++++++++----------- index.html | 70 +++++++++++++++++++++++++++--------------------------- style.css | 60 +++++++++++++++++++++++----------------------- 3 files changed, 81 insertions(+), 79 deletions(-) diff --git a/app.js b/app.js index ab737a60027..342b059a898 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 @@ -33,17 +33,19 @@ var createNewTaskElement=function(taskString){ var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; - label.className='task'; + label.className="label task__form"; //Each elements, needs appending + listItem.className="task"; checkBox.type="checkbox"; + checkBox.className="input"; editInput.type="text"; - editInput.className="task"; + editInput.className="input task__form"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + editButton.className="btn btn-edit"; - deleteButton.className="delete"; + deleteButton.className="btn btn-delete"; deleteButtonImg.src='./remove.svg'; deleteButton.appendChild(deleteButtonImg); @@ -84,12 +86,12 @@ 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 editBtn=listItem.querySelector(".btn-edit"); + 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 +100,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 +133,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); @@ -156,8 +158,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(".btn-edit"); + var deleteButton=taskListItem.querySelector(".btn-delete"); //Bind editTask to edit button. diff --git a/index.html b/index.html index 392479c90b1..3e324ff64b6 100644 --- a/index.html +++ b/index.html @@ -5,49 +5,49 @@ - -
- - Want more details? + +
+ + Want more details?
-
-

- -

- - +
+

+ +

+ +

-

Todo

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

Completed

-
    -
  • - - - - - +
diff --git a/style.css b/style.css index 6154bae3169..7a21bc9cacf 100644 --- a/style.css +++ b/style.css @@ -1,50 +1,50 @@ /* Basic Style */ -body { +.body { background-color: #f8f8f8; 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 .header__inf { font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { text-align: center; +.header { text-align: center; } } -.centered-main-page-element { +.main { display: block; width: 500px; margin: 0 auto 0; } -.task { +.task__form { width: 56%; display: inline-block; flex-grow: 1 } -.task-row-wrapper { +.task-wrapper { display: flex; } -ul { +.tasks { margin:0; padding: 0px; } -li, h3 { +.task, .title { 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, +.label[for="new-task"] { 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[type="text"] { 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[type="text"]:focus { color: #333; } /* New Task */ -label[for="new-task"] { +.label[for="new-task"] { display: block; margin: 0 0 20px; } -input#new-task { +.input#new-task { width: 318px; } /* Task list */ -li { +.task { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; @@ -102,47 +102,47 @@ li { justify-content: space-between; align-items: center; } -li > * { +.task > * { vertical-align: middle; } -li > input[type="checkbox"] { +.task > .input[type="checkbox"] { margin: 0 10px; } -li > label { +.task > .label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { +.task > .input[type="text"] { width: 226px } -button.delete img { +.btn-delete .img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +.btn-delete .img:hover { transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { +.tasks#completed-tasks .label { text-decoration: line-through color: #888; } /* Edit Task */ -ul li input[type="text"] { +.tasks .task .input[type="text"] { display:none } -ul li.editMode input[type="text"] { +.tasks .task.edit-mode .input[type="text"] { display:inline-block; width:224px } -ul li.editMode label { +.tasks .task.edit-mode .label { display:none; } \ No newline at end of file From 06d97e10f3b4b09fbce7d605b3c4ec1baa7fe1d2 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Mon, 24 Apr 2023 22:03:25 +0300 Subject: [PATCH 09/17] refactor(basic-3.5): add indents in blocks --- style.css | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 7a21bc9cacf..5ba20880064 100644 --- a/style.css +++ b/style.css @@ -4,46 +4,58 @@ color: #333; font-family: Lato, sans-serif; } + .header { width: 500px; margin: 0 auto; display: block; text-align: right; } + .header .img { width: 100%; } + .header .header__inf { font-family: fantasy, cursive; } @media (max-width:768px) { -.header { text-align: center; -} + + .header { text-align: center; + } + } + .main { display: block; width: 500px; margin: 0 auto 0; } + .task__form { width: 56%; display: inline-block; flex-grow: 1 } + .task-wrapper { display: flex; } + .tasks { margin:0; padding: 0px; } + .task, .title { list-style:none; } + .input,.btn{ outline:none; } + .btn { background: none; border: 0px; @@ -53,9 +65,11 @@ font-family: Lato, sans-serif; cursor: pointer; } + .btn:hover { color: #3a3a3a; } + /* Heading */ .title, .label[for="new-task"] { @@ -67,6 +81,7 @@ margin: 0; text-transform: uppercase; } + .input[type="text"] { margin: 0; font-size: 18px; @@ -79,6 +94,7 @@ font-family: Lato, sans-serif; color: #888; } + .input[type="text"]:focus { color: #333; } @@ -88,6 +104,7 @@ display: block; margin: 0 0 20px; } + .input#new-task { width: 318px; } @@ -102,6 +119,7 @@ justify-content: space-between; align-items: center; } + .task > * { vertical-align: middle; } @@ -109,20 +127,24 @@ .task > .input[type="checkbox"] { margin: 0 10px; } + .task > .label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } + .task > .input[type="text"] { width: 226px } + .btn-delete .img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } + .btn-delete .img:hover { transform: rotateZ(0); } From ab3dd78dad5b7d77e8481a3c3c5161b34ecea11a Mon Sep 17 00:00:00 2001 From: ly4ik Date: Mon, 24 Apr 2023 23:11:29 +0300 Subject: [PATCH 10/17] refactor(basic-3.6): add spaces after property names --- style.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/style.css b/style.css index 5ba20880064..c956a9d7d0f 100644 --- a/style.css +++ b/style.css @@ -20,7 +20,7 @@ font-family: fantasy, cursive; } -@media (max-width:768px) { +@media (max-width: 768px) { .header { text-align: center; } @@ -44,16 +44,16 @@ } .tasks { - margin:0; + margin: 0; padding: 0px; } .task, .title { - list-style:none; + list-style: none; } .input,.btn{ - outline:none; + outline: none; } .btn { @@ -157,14 +157,14 @@ /* Edit Task */ .tasks .task .input[type="text"] { - display:none + display: none } .tasks .task.edit-mode .input[type="text"] { - display:inline-block; - width:224px + display: inline-block; + width: 224px } .tasks .task.edit-mode .label { - display:none; + display: none; } \ No newline at end of file From a868477e1c7aef55a4d848cbe53b6993facc6aa9 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Mon, 24 Apr 2023 23:14:49 +0300 Subject: [PATCH 11/17] refactor(basic-3.7): add semicolons after properties --- style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index c956a9d7d0f..3967f4ab9ac 100644 --- a/style.css +++ b/style.css @@ -36,7 +36,7 @@ .task__form { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-wrapper { @@ -136,7 +136,7 @@ } .task > .input[type="text"] { - width: 226px + width: 226px; } .btn-delete .img { @@ -151,13 +151,13 @@ /* Completed */ .tasks#completed-tasks .label { - text-decoration: line-through + text-decoration: line-through; color: #888; } /* Edit Task */ .tasks .task .input[type="text"] { - display: none + display: none; } .tasks .task.edit-mode .input[type="text"] { From 052316e14b78ccc8e069de2bb6127c06fb88f9c7 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Mon, 24 Apr 2023 23:18:18 +0300 Subject: [PATCH 12/17] refactor(basic-3.8): add separarion of selectors and properties --- style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 3967f4ab9ac..8098b0ca84f 100644 --- a/style.css +++ b/style.css @@ -48,11 +48,13 @@ padding: 0px; } -.task, .title { +.task, +.title { list-style: none; } -.input,.btn{ +.input, +.btn{ outline: none; } From fad8da4be3d281d1e6009726d2d76860bfe7720f Mon Sep 17 00:00:00 2001 From: ly4ik Date: Mon, 24 Apr 2023 23:33:35 +0300 Subject: [PATCH 13/17] refactor(extended-1.1): change tags to semantics --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3e324ff64b6..d8eae313ce3 100644 --- a/index.html +++ b/index.html @@ -6,18 +6,18 @@ -
+
Want more details? -
-
-

+ +

+
-

+

Todo

  • @@ -51,7 +51,7 @@

    Completed

-
+ \ No newline at end of file From dac402e4d5fe52f9984201e8b15db3a44bfc5635 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Mon, 24 Apr 2023 23:52:20 +0300 Subject: [PATCH 14/17] fix(extended-1.2): add alt for multimedia --- app.js | 2 ++ index.html | 8 ++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index 342b059a898..f69d288785e 100644 --- a/app.js +++ b/app.js @@ -47,6 +47,8 @@ var createNewTaskElement=function(taskString){ deleteButton.className="btn btn-delete"; deleteButtonImg.src='./remove.svg'; + deleteButtonImg.className="img"; + deleteButtonImg.alt="delete button"; deleteButton.appendChild(deleteButtonImg); diff --git a/index.html b/index.html index d8eae313ce3..7685e8833a2 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@
- + the Eisenhower matrix Want more details?
@@ -26,7 +26,7 @@

Todo

  • @@ -35,7 +35,7 @@

    Todo

    • @@ -47,7 +47,7 @@

    Completed

    From c7aa81567b699a6eda9665a5a2e1a914757618e6 Mon Sep 17 00:00:00 2001 From: ly4ik Date: Tue, 25 Apr 2023 01:44:54 +0300 Subject: [PATCH 15/17] refactor(basic-3.7): add semicolons after properties --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 8098b0ca84f..5e0d12d99c2 100644 --- a/style.css +++ b/style.css @@ -164,7 +164,7 @@ .tasks .task.edit-mode .input[type="text"] { display: inline-block; - width: 224px + width: 224px; } .tasks .task.edit-mode .label { From ad29d0b854e58d9f3e2d19f1a2b84e03c1dd69ee Mon Sep 17 00:00:00 2001 From: Pavel <114909461+Ly4ik@users.noreply.github.com> Date: Tue, 25 Apr 2023 02:02:01 +0300 Subject: [PATCH 16/17] Revert "Clean code s1e1" --- app.js | 32 ++++---- index.html | 72 ++++------------ style.css | 236 ++++++++++++++++++++++++----------------------------- 3 files changed, 137 insertions(+), 203 deletions(-) diff --git a/app.js b/app.js index f69d288785e..ab737a60027 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("incomplete-tasks");//ul of #incomplete-tasks +var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks @@ -33,22 +33,18 @@ var createNewTaskElement=function(taskString){ var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; - label.className="label task__form"; + label.className='task'; //Each elements, needs appending - listItem.className="task"; checkBox.type="checkbox"; - checkBox.className="input"; editInput.type="text"; - editInput.className="input task__form"; + editInput.className="task"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="btn btn-edit"; + editButton.className="edit"; - deleteButton.className="btn btn-delete"; + deleteButton.className="delete"; deleteButtonImg.src='./remove.svg'; - deleteButtonImg.className="img"; - deleteButtonImg.alt="delete button"; deleteButton.appendChild(deleteButtonImg); @@ -88,12 +84,12 @@ var editTask=function(){ var editInput=listItem.querySelector('input[type=text]'); var label=listItem.querySelector("label"); - var editBtn=listItem.querySelector(".btn-edit"); - var containsClass=listItem.classList.contains("edit-mode"); - //If class of the parent is .edit-mode + var editBtn=listItem.querySelector(".edit"); + var containsClass=listItem.classList.contains("editMode"); + //If class of the parent is .editmode if(containsClass){ - //switch to .edit-mode + //switch to .editmode //label becomes the inputs value. label.innerText=editInput.value; editBtn.innerText="Edit"; @@ -102,8 +98,8 @@ var editTask=function(){ editBtn.innerText="Save"; } - //toggle .edit-mode on the parent. - listItem.classList.toggle("edit-mode"); + //toggle .editmode on the parent. + listItem.classList.toggle("editMode"); }; @@ -135,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 #incomplete-tasks. + //Append the task list item to the #incompleteTasks. var listItem=this.parentNode; incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem,taskCompleted); @@ -160,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(".btn-edit"); - var deleteButton=taskListItem.querySelector(".btn-delete"); + var editButton=taskListItem.querySelector("button.edit"); + var deleteButton=taskListItem.querySelector("button.delete"); //Bind editTask to edit button. diff --git a/index.html b/index.html index 7685e8833a2..ef4aa1f60ca 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,19 @@ - - - Todo App - - - - -
    - the Eisenhower matrix - Want more details? -
    -
    -
    - -
    - - -
    -
    -

    Todo

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

    Completed

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

    +

    Todo

    +
      +
      • +
      • +

    Completed

    • +
      • +
    +
    + + \ No newline at end of file diff --git a/style.css b/style.css index 5e0d12d99c2..ab36227705e 100644 --- a/style.css +++ b/style.css @@ -1,172 +1,148 @@ /* Basic Style */ -.body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; +body { + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; } - -.header { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; +.aaa { + width: 500px; + margin: 0 auto; + display: block; + text-align: right; } - -.header .img { - width: 100%; +.aaa img { + width: 100%; } - -.header .header__inf { - font-family: fantasy, cursive; +.aaa .more_inf { + font-family: fantasy, cursive; } -@media (max-width: 768px) { - - .header { text-align: center; - } - +@media (max-width:768px) { +.aaa { text-align: center; } - -.main { - display: block; - width: 500px; - margin: 0 auto 0; } - -.task__form { - width: 56%; - display: inline-block; - flex-grow: 1; +.centered-main-page-element { + display: block; + width: 500px; + margin: 0 auto 0; } - -.task-wrapper { - display: flex; +.task { + width: 56%; + display: inline-block; + flex-grow: 1 } - -.tasks { - margin: 0; - padding: 0px; +.task-row-wrapper { + display: flex; } - -.task, -.title { - list-style: none; +ul { + margin:0; + padding: 0px; } - -.input, -.btn{ - outline: none; +li, h3 { + list-style:none; } - -.btn { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; +input,button{ + outline:none; } - -.btn:hover { - color: #3a3a3a; +button { + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; } - -/* Heading */ -.title, -.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; -} - -.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; +button:hover { + color: #3a3A3a; } - -.input[type="text"]:focus { - color: #333; +/* 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; +} +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; +} +input[type="text"]:focus { + color: #333; } /* New Task */ -.label[for="new-task"] { - display: block; - margin: 0 0 20px; +label[for='new-task'] { + display: block; + margin: 0 0 20px; } - -.input#new-task { - width: 318px; +input#new-task { + width: 318px; } /* Task list */ -.task { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; +li { + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } - -.task > * { - vertical-align: middle; +li > * { + vertical-align: middle; } -.task > .input[type="checkbox"] { - margin: 0 10px; +li > input[type="checkbox"] { + margin: 0 10px; } - -.task > .label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; +li > label { + padding-left: 10px; + box-sizing: border-box; + font-size: 18px; + width: 226px; } - -.task > .input[type="text"] { - width: 226px; +li > input[type="text"] { + width: 226px } - -.btn-delete .img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; +button.delete img { + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; } - -.btn-delete .img:hover { - transform: rotateZ(0); +button.delete img:hover { + transform: rotateZ(0); } /* Completed */ -.tasks#completed-tasks .label { - text-decoration: line-through; - color: #888; +ul#completed-tasks label { + text-decoration: line-through + color: #888; } /* Edit Task */ -.tasks .task .input[type="text"] { - display: none; +ul li input[type=text] { + display:none } -.tasks .task.edit-mode .input[type="text"] { - display: inline-block; - width: 224px; +ul li.editMode input[type=text] { + display:inline-block; + width:224px } -.tasks .task.edit-mode .label { - display: none; +ul li.editMode label { + display:none; } \ No newline at end of file From 771af1933e7f80c6e6994bae71d1550c0e3c26d2 Mon Sep 17 00:00:00 2001 From: Pavel <114909461+Ly4ik@users.noreply.github.com> Date: Tue, 25 Apr 2023 02:06:14 +0300 Subject: [PATCH 17/17] Revert "Revert "Clean code s1e1"" --- app.js | 32 ++++---- index.html | 72 ++++++++++++---- style.css | 236 +++++++++++++++++++++++++++++------------------------ 3 files changed, 203 insertions(+), 137 deletions(-) diff --git a/app.js b/app.js index ab737a60027..f69d288785e 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 @@ -33,18 +33,22 @@ var createNewTaskElement=function(taskString){ var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; - label.className='task'; + label.className="label task__form"; //Each elements, needs appending + listItem.className="task"; checkBox.type="checkbox"; + checkBox.className="input"; editInput.type="text"; - editInput.className="task"; + editInput.className="input task__form"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + editButton.className="btn btn-edit"; - deleteButton.className="delete"; + deleteButton.className="btn btn-delete"; deleteButtonImg.src='./remove.svg'; + deleteButtonImg.className="img"; + deleteButtonImg.alt="delete button"; deleteButton.appendChild(deleteButtonImg); @@ -84,12 +88,12 @@ 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 editBtn=listItem.querySelector(".btn-edit"); + 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 +102,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 +135,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); @@ -156,8 +160,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(".btn-edit"); + var deleteButton=taskListItem.querySelector(".btn-delete"); //Bind editTask to edit button. diff --git a/index.html b/index.html index ef4aa1f60ca..7685e8833a2 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,57 @@ + -Todo App - - - - -
    Want more details?
    -

    -

    Todo

    -
      -
      • -
      • -

    Completed

    • -
      • -
    -
    - - + + Todo App + + + + +
    + the Eisenhower matrix + Want more details? +
    +
    +
    + +
    + + +
    +
    +

    Todo

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

    Completed

    +
      +
    • + + + + + +
      • +
    +
    + + \ No newline at end of file diff --git a/style.css b/style.css index ab36227705e..5e0d12d99c2 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,172 @@ /* Basic Style */ -body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; +.body { + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; } -.aaa { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; -} -.aaa img { - width: 100%; + +.header { + width: 500px; + margin: 0 auto; + display: block; + text-align: right; } -.aaa .more_inf { - font-family: fantasy, cursive; + +.header .img { + width: 100%; } -@media (max-width:768px) { -.aaa { text-align: center; +.header .header__inf { + font-family: fantasy, cursive; } + +@media (max-width: 768px) { + + .header { text-align: center; + } + } -.centered-main-page-element { - display: block; - width: 500px; - margin: 0 auto 0; + +.main { + display: block; + width: 500px; + margin: 0 auto 0; } -.task { - width: 56%; - display: inline-block; - flex-grow: 1 + +.task__form { + width: 56%; + display: inline-block; + flex-grow: 1; } -.task-row-wrapper { - display: flex; + +.task-wrapper { + display: flex; } -ul { - margin:0; - padding: 0px; + +.tasks { + margin: 0; + padding: 0px; } -li, h3 { - list-style:none; + +.task, +.title { + list-style: none; } -input,button{ - outline:none; + +.input, +.btn{ + outline: none; } -button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; + +.btn { + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; } -button:hover { - color: #3a3A3a; + +.btn:hover { + 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; -} -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; -} -input[type="text"]:focus { - color: #333; +.title, +.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; +} + +.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; +} + +.input[type="text"]:focus { + color: #333; } /* New Task */ -label[for='new-task'] { - display: block; - margin: 0 0 20px; +.label[for="new-task"] { + display: block; + margin: 0 0 20px; } -input#new-task { - width: 318px; + +.input#new-task { + width: 318px; } /* Task list */ -li { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; +.task { + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } -li > * { - vertical-align: middle; + +.task > * { + vertical-align: middle; } -li > input[type="checkbox"] { - margin: 0 10px; +.task > .input[type="checkbox"] { + margin: 0 10px; } -li > label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; + +.task > .label { + padding-left: 10px; + box-sizing: border-box; + font-size: 18px; + width: 226px; } -li > input[type="text"] { - width: 226px + +.task > .input[type="text"] { + width: 226px; } -button.delete img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; + +.btn-delete .img { + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; } -button.delete img:hover { - transform: rotateZ(0); + +.btn-delete .img:hover { + transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { - text-decoration: line-through - color: #888; +.tasks#completed-tasks .label { + text-decoration: line-through; + color: #888; } /* Edit Task */ -ul li input[type=text] { - display:none +.tasks .task .input[type="text"] { + display: none; } -ul li.editMode input[type=text] { - display:inline-block; - width:224px +.tasks .task.edit-mode .input[type="text"] { + display: inline-block; + width: 224px; } -ul li.editMode label { - display:none; +.tasks .task.edit-mode .label { + display: none; } \ No newline at end of file