From 77817867696191579c049f81a533551571b97337 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 01:23:38 +0300 Subject: [PATCH 01/19] refactor: adjust HTML-formating according ro rule 2.1 in html-css.md --- index.html | 71 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60ca..86c8e9966f9 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 b378b111142ca554700f4f765efea812b8f1ae20 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 01:25:52 +0300 Subject: [PATCH 02/19] refactor: adjust HTML-formating according ro rule 2.2 in html-css.md --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 86c8e9966f9..c2f690a7bd5 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + Todo App From 4e41c78eb55d7258dfc5cd1b16af5da2a2349bd2 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 01:28:11 +0300 Subject: [PATCH 03/19] refactor: adjust HTML-formating according ro rule 2.3 in html-css.md --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c2f690a7bd5..fafdf4fa4ef 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@
- Want more details? + Want more details?

From 04764bea348ac56ac3b5b053b0d435678aeffc86 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 01:30:20 +0300 Subject: [PATCH 04/19] refactor: adjust HTML-formating according ro rule 2.4 in html-css.md --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index fafdf4fa4ef..af5091d9e8f 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ Todo App - - + +

@@ -51,6 +51,6 @@

Completed

- + \ No newline at end of file From 5c546a3f8227567d13e44bfde0df7a4e90d8bf72 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 01:32:35 +0300 Subject: [PATCH 05/19] refactor: adjust HTML-formating according ro rule 1.2 in html-css.md --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index af5091d9e8f..86f49ea46cf 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ - + Todo App - - + +
@@ -51,6 +51,6 @@

Completed

- + \ No newline at end of file From 2b4ab79611702a647a0cfd5dda4de72ffd12933a Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 01:33:30 +0300 Subject: [PATCH 06/19] refactor: adjust HTML-formating according ro rule 1.3 in html-css.md --- index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 86f49ea46cf..d9896dae03b 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,26 @@ Todo App - +
- Want more details? + Want more details?
-

+

- +

Todo

-
    +
    • - + @@ -32,7 +32,7 @@

      Todo

      - + From 710f5c2e9b1dcb05257dd76cd60ed8230dc73da6 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 01:36:35 +0300 Subject: [PATCH 07/19] refactor: adjust CSS-formating according ro rule 1.1 in html-css.md --- style.css | 146 +++++++++++++++++++++++++++--------------------------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/style.css b/style.css index ab36227705e..a2b3957240a 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 +li > input[type="text"] { + 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 b4cd8c521e13cf5a04407c3cb8be80895c85d919 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 01:53:06 +0300 Subject: [PATCH 08/19] refactor: adjust CSS-formating according ro rule 3.5 in html-css.md --- style.css | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index a2b3957240a..cbb98b84ada 100644 --- a/style.css +++ b/style.css @@ -4,46 +4,57 @@ body { color: #333; font-family: Lato, sans-serif; } + .aaa { width: 500px; margin: 0 auto; display: block; text-align: right; } + .aaa img { width: 100%; } + .aaa .more_inf { 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; } + .task { width: 56%; display: inline-block; flex-grow: 1 } + .task-row-wrapper { display: flex; } + ul { margin:0; padding: 0px; } + li, h3 { list-style:none; } + input,button{ outline:none; } + button { background: none; border: 0px; @@ -53,9 +64,11 @@ button { font-family: Lato, sans-serif; cursor: pointer; } + button:hover { color: #3a3A3a; } + /* Heading */ h3, label[for='new-task'] { @@ -67,6 +80,7 @@ label[for='new-task'] { margin: 0; text-transform: uppercase; } + input[type="text"] { margin: 0; font-size: 18px; @@ -79,6 +93,7 @@ input[type="text"] { font-family: Lato, sans-serif; color: #888; } + input[type="text"]:focus { color: #333; } @@ -88,6 +103,7 @@ label[for='new-task'] { display: block; margin: 0 0 20px; } + input#new-task { width: 318px; } @@ -102,6 +118,7 @@ li { justify-content: space-between; align-items: center; } + li > * { vertical-align: middle; } @@ -109,20 +126,24 @@ li > * { li > input[type="checkbox"] { margin: 0 10px; } + li > label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } + li > input[type="text"] { width: 226px } + button.delete img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } + button.delete img:hover { transform: rotateZ(0); } From 02c3c4d2a4c79e630b114e520f53340e17ec4893 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 02:17:37 +0300 Subject: [PATCH 09/19] refactor: adjust CSS-formating according ro rule 3.7 in html-css.md --- style.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index cbb98b84ada..b50c020ca16 100644 --- a/style.css +++ b/style.css @@ -35,7 +35,7 @@ body { .task { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-row-wrapper { @@ -135,7 +135,7 @@ li > label { } li > input[type="text"] { - width: 226px + width: 226px; } button.delete img { @@ -150,20 +150,20 @@ button.delete img:hover { /* Completed */ ul#completed-tasks label { - text-decoration: line-through + 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 + width:224px; } ul li.editMode label { display:none; -} \ No newline at end of file +} From 549edfae21478abe62a75af86eeb15b0f55697d1 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 02:58:33 +0300 Subject: [PATCH 10/19] refactor: adjust CSS-formating according ro rule 1.2 in html-css.md --- style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index b50c020ca16..bac5a6b3c8d 100644 --- a/style.css +++ b/style.css @@ -66,7 +66,7 @@ button { } button:hover { - color: #3a3A3a; + color: #3a3a3a; } /* Heading */ @@ -87,8 +87,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 cd0e0b4e1191992d9880e2268ae842a09273c973 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sat, 27 Nov 2021 05:35:53 +0300 Subject: [PATCH 11/19] refactor: adjust CSS-formating according ro rule 3.6 in html-css.md --- style.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/style.css b/style.css index bac5a6b3c8d..dc6d7146cfd 100644 --- a/style.css +++ b/style.css @@ -20,7 +20,7 @@ body { font-family: fantasy, cursive; } -@media (max-width:768px) { +@media (max-width: 768px) { .aaa { text-align: center; } @@ -43,16 +43,16 @@ body { } ul { - margin:0; + margin: 0; padding: 0px; } li, h3 { - list-style:none; + list-style: none; } input,button{ - outline:none; + outline: none; } button { @@ -156,14 +156,14 @@ ul#completed-tasks label { /* 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; } From 7fde44411b0a7de003eea27197a9dfc1e6275835 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Sun, 28 Nov 2021 06:21:39 +0300 Subject: [PATCH 12/19] refactor: adjust HTML-formating according ro rule 1.1 in html-css-extended.md --- index.html | 84 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 44 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index d9896dae03b..6b506b28c16 100644 --- a/index.html +++ b/index.html @@ -5,52 +5,56 @@ -
      +
      Want more details? -
      -
      -

      - + +

      +
      +

      Add Item

      -

      -

      Todo

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

      Completed

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

      Todo

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

      Completed

      +
        +
      • + + + + + +
        • +
      +
      + \ No newline at end of file From 5581b1f6aac47e5549fb5452d93127bfbe04cb99 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Mon, 29 Nov 2021 01:51:45 +0300 Subject: [PATCH 13/19] refactor: implement BEM notaition accordig to rule 2.1 in html-css-extended.md, that automaticaly cover rule 3.1, 3.2, 3.3 from html-css.md --- app.js | 39 ++++++++++++++++++++------- index.html | 78 ++++++++++++++++++++++++++++-------------------------- style.css | 70 ++++++++++++++++++++++++++++-------------------- 3 files changed, 111 insertions(+), 76 deletions(-) diff --git a/app.js b/app.js index ab737a60027..e080ea8c6df 100644 --- a/app.js +++ b/app.js @@ -18,6 +18,7 @@ var completedTasksHolder=document.getElementById("completed-tasks");//completed- var createNewTaskElement=function(taskString){ var listItem=document.createElement("li"); + listItem.classList.add("list-item") //input (checkbox) var checkBox=document.createElement("input");//checkbx @@ -27,24 +28,44 @@ var createNewTaskElement=function(taskString){ 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'; + label.classList.add("list-item__element"); + label.classList.add("list-item__label"); + label.classList.add("task"); + + // label.className="task"; //Each elements, needs appending checkBox.type="checkbox"; + checkBox.classList.add("list-item__element"); + checkBox.classList.add("list-item__input"); + checkBox.classList.add("list-item__checkbox"); + editInput.type="text"; - editInput.className="task"; + editInput.classList.add("list-item__element"); + editInput.classList.add("list-item__input"); + editInput.classList.add("list-item__text-input"); + editInput.classList.add("task"); + // editInput.className="task"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; - - deleteButton.className="delete"; - deleteButtonImg.src='./remove.svg'; + editButton.classList.add("list-item__element"); + editButton.classList.add("list-item__button"); + editButton.classList.add("edit"); + // editButton.className="edit"; + + // deleteButton.className="delete"; + deleteButton.classList.add("list-item__element"); + deleteButton.classList.add("delete"); + deleteButton.classList.add("list-item__button"); + deleteButtonImg.src="./remove.svg"; + deleteButtonImg.classList.add("list-item__delete_image"); + deleteButtonImg.setAttribute("alt", "remove task"); deleteButton.appendChild(deleteButtonImg); @@ -85,7 +106,7 @@ 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"); + var containsClass=listItem.classList.contains("list-item__edit-mode"); //If class of the parent is .editmode if(containsClass){ @@ -99,7 +120,7 @@ var editTask=function(){ } //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + listItem.classList.toggle("list-item__edit-mode"); }; diff --git a/index.html b/index.html index 6b506b28c16..6d12a0dd5f2 100644 --- a/index.html +++ b/index.html @@ -1,55 +1,57 @@ - Todo App + Todo App - -
      - - Want more details? + +
      + eisenhower matrix + Want more details?
      -
      -

      Add Item

      -
      - - -
      +
      +

      Add Item

      +
        +
      • + + +
        • +
      -
      -

      Todo

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

      Completed

      -
        -
      • - - - - - +
      diff --git a/style.css b/style.css index dc6d7146cfd..e444af95307 100644 --- a/style.css +++ b/style.css @@ -1,32 +1,32 @@ /* 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__link { 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; @@ -38,24 +38,35 @@ body { flex-grow: 1; } -.task-row-wrapper { +.list-item_new-task { display: flex; } -ul { +.section_new-task { + margin-top: 16px; +} + +.section__list { margin: 0; padding: 0px; } -li, h3 { +.section__list_new-task { + padding: 0; +} + +/* .section__title, */ +.list-item { list-style: none; } -input,button{ +.list-item__input_new-task, +.list-item__input, +.list-item__button { outline: none; } -button { +.list-item__button { background: none; border: 0px; color: #888; @@ -65,13 +76,12 @@ button { cursor: pointer; } -button:hover { +.list-item__button:hover { color: #3a3a3a; } /* Heading */ -h3, -label[for='new-task'] { +.section__title { color: #333; font-weight: 700; font-size: 15px; @@ -81,7 +91,8 @@ label[for='new-task'] { text-transform: uppercase; } -input[type="text"] { +.list-item__input_new-task, +.list-item__text-input { margin: 0; font-size: 18px; line-height: 18px; @@ -94,22 +105,23 @@ input[type="text"] { color: #888; } -input[type="text"]:focus { +.list-item__input_new-task:focus, +.list-item__text-input:focus { color: #333; } /* New Task */ -label[for='new-task'] { +.section__tltle_new-task { 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; @@ -119,51 +131,51 @@ li { align-items: center; } -li > * { +.list-item__element { vertical-align: middle; } -li > input[type="checkbox"] { +.list-item__checkbox { margin: 0 10px; } -li > label { +.list-item__label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { +.list-item__text-input { width: 226px; } -button.delete img { +.list-item__delete_image{ height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +.list-item__delete_image:hover { transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { +.completed-task .list-item .list-item__label { text-decoration: line-through; color: #888; } /* Edit Task */ -ul li input[type=text] { +.list-item__text-input { display: none; } -ul li.editMode input[type=text] { +.list-item__edit-mode .list-item__text-input { display: inline-block; width: 224px; } -ul li.editMode label { +.list-item__edit-mode .list-item__label { display: none; } From 0fd08bebf92d10d6f5c1ed38f9ffe40d0fb0754a Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Mon, 29 Nov 2021 01:55:08 +0300 Subject: [PATCH 14/19] refactor: add alt attribute to multimedia accordig to rule 1.2 in html-css-extended.md --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 6d12a0dd5f2..9754fccae74 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@

      Todo

    • @@ -37,7 +37,7 @@

      Todo

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

    Completed

From 599a1443c67a26d885ca678d21cb58a83a875515 Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Mon, 29 Nov 2021 01:57:43 +0300 Subject: [PATCH 15/19] refactor: add lang attribure to HTML file --- index.html | 1 + sdfks.html | 0 2 files changed, 1 insertion(+) create mode 100644 sdfks.html diff --git a/index.html b/index.html index 9754fccae74..8f788b7133e 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,5 @@ + diff --git a/sdfks.html b/sdfks.html new file mode 100644 index 00000000000..e69de29bb2d From 3f58c13f99c3abdbd9d338a136a8e7be04613ecd Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Mon, 29 Nov 2021 02:00:17 +0300 Subject: [PATCH 16/19] fix: replace character encoding to separate meta tag --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 8f788b7133e..f87d8c829c8 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,11 @@ + + + - + Todo App From 6e840e6677d4e866b0b0e86f1ed052c9539a02ac Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Mon, 29 Nov 2021 02:49:05 +0300 Subject: [PATCH 17/19] refactor: adjust formating to app.js file according rule 2.4 from html-and-css.md --- app.js | 6 ++++-- index.html | 2 +- sdfks.html | 0 style.css | 4 ++-- 4 files changed, 7 insertions(+), 5 deletions(-) delete mode 100644 sdfks.html diff --git a/app.js b/app.js index e080ea8c6df..26326284dc0 100644 --- a/app.js +++ b/app.js @@ -103,7 +103,8 @@ var editTask=function(){ var listItem=this.parentNode; - var editInput=listItem.querySelector('input[type=text]'); + var editInput=listItem.querySelector(".list-item__text-input"); + // var editInput=listItem.querySelector("input[type=text]"); var label=listItem.querySelector("label"); var editBtn=listItem.querySelector(".edit"); var containsClass=listItem.classList.contains("list-item__edit-mode"); @@ -176,7 +177,8 @@ 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 checkBox=taskListItem.querySelector("input[type=checkbox]"); + var checkBox=taskListItem.querySelector(".list-item__checkbox"); var editButton=taskListItem.querySelector("button.edit"); var deleteButton=taskListItem.querySelector("button.delete"); diff --git a/index.html b/index.html index f87d8c829c8..b6d1432835d 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@

Todo

-
+

Completed

  • diff --git a/sdfks.html b/sdfks.html deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/style.css b/style.css index e444af95307..deb7c398990 100644 --- a/style.css +++ b/style.css @@ -150,7 +150,7 @@ width: 226px; } -.list-item__delete_image{ +.list-item__delete_image { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; @@ -178,4 +178,4 @@ .list-item__edit-mode .list-item__label { display: none; -} +} \ No newline at end of file From 08cd98fe5c0efef3c26d11b1c210a5789a2bc2da Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Mon, 29 Nov 2021 04:42:19 +0300 Subject: [PATCH 18/19] fix: fix classes name in all files according to rule 3.1 in html-and-css.md --- app.js | 50 +++++++++++++++---------------- index.html | 46 ++++++++++++++--------------- style.css | 87 +++++++++++++++++++++++++++--------------------------- 3 files changed, 91 insertions(+), 92 deletions(-) diff --git a/app.js b/app.js index 26326284dc0..86b11f72e40 100644 --- a/app.js +++ b/app.js @@ -26,45 +26,45 @@ var createNewTaskElement=function(taskString){ var label=document.createElement("label");//label //input (text) var editInput=document.createElement("input");//text - //button.edit + //list-item__element_button_edit var editButton=document.createElement("button");//edit button - //button.delete + //list-item__element_button_delete var deleteButton=document.createElement("button");//delete button var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; label.classList.add("list-item__element"); - label.classList.add("list-item__label"); - label.classList.add("task"); + label.classList.add("list-item__element_label"); + label.classList.add("list-item__element_task"); - // label.className="task"; + // label.className="list-item__element_task"; //Each elements, needs appending checkBox.type="checkbox"; checkBox.classList.add("list-item__element"); - checkBox.classList.add("list-item__input"); - checkBox.classList.add("list-item__checkbox"); + checkBox.classList.add("list-item__element_input"); + checkBox.classList.add("list-item__element_checkbox"); editInput.type="text"; editInput.classList.add("list-item__element"); - editInput.classList.add("list-item__input"); - editInput.classList.add("list-item__text-input"); - editInput.classList.add("task"); - // editInput.className="task"; + editInput.classList.add("list-item__element_input"); + editInput.classList.add("list-item__element_text-input"); + editInput.classList.add("list-item__element_task"); + // editInput.className="list-item__element_task"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. editButton.classList.add("list-item__element"); - editButton.classList.add("list-item__button"); - editButton.classList.add("edit"); - // editButton.className="edit"; + editButton.classList.add("list-item__element_button"); + editButton.classList.add("list-item__element_button_edit"); + // editButton.className="list-item__element_button_edit"; // deleteButton.className="delete"; deleteButton.classList.add("list-item__element"); - deleteButton.classList.add("delete"); - deleteButton.classList.add("list-item__button"); + deleteButton.classList.add("list-item__element_button_delete"); + deleteButton.classList.add("list-item__element_button"); deleteButtonImg.src="./remove.svg"; - deleteButtonImg.classList.add("list-item__delete_image"); + deleteButtonImg.classList.add("list-item__element_delete_image"); deleteButtonImg.setAttribute("alt", "remove task"); deleteButton.appendChild(deleteButtonImg); @@ -103,11 +103,10 @@ var editTask=function(){ var listItem=this.parentNode; - var editInput=listItem.querySelector(".list-item__text-input"); - // var editInput=listItem.querySelector("input[type=text]"); + var editInput=listItem.querySelector(".list-item__element_text-input"); var label=listItem.querySelector("label"); - var editBtn=listItem.querySelector(".edit"); - var containsClass=listItem.classList.contains("list-item__edit-mode"); + var editBtn=listItem.querySelector(".list-item__element_button_edit"); + var containsClass=listItem.classList.contains("list-item_edit-mode"); //If class of the parent is .editmode if(containsClass){ @@ -121,7 +120,7 @@ var editTask=function(){ } //toggle .editmode on the parent. - listItem.classList.toggle("list-item__edit-mode"); + listItem.classList.toggle("list-item_edit-mode"); }; @@ -177,10 +176,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 checkBox=taskListItem.querySelector(".list-item__checkbox"); - var editButton=taskListItem.querySelector("button.edit"); - var deleteButton=taskListItem.querySelector("button.delete"); + var checkBox=taskListItem.querySelector(".list-item__element_checkbox"); + var editButton=taskListItem.querySelector(".list-item__element_button_edit"); + var deleteButton=taskListItem.querySelector(".list-item__element_button_delete"); //Bind editTask to edit button. diff --git a/index.html b/index.html index b6d1432835d..08c6fa86614 100644 --- a/index.html +++ b/index.html @@ -15,11 +15,11 @@
    -

    Add Item

    +

    Add Item

    • - - + +
    @@ -27,35 +27,35 @@

    Add Item

    Todo

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

Completed

-
    +
    • - - - - - +
    diff --git a/style.css b/style.css index deb7c398990..f198344c478 100644 --- a/style.css +++ b/style.css @@ -22,7 +22,8 @@ @media (max-width: 768px) { - .header { text-align: center; + .header { + text-align: center; } } @@ -32,41 +33,52 @@ margin: 0 auto 0; } -.task { - width: 56%; - display: inline-block; - flex-grow: 1; -} - -.list-item_new-task { - display: flex; +.section__list { + margin: 0; + padding: 0px; } .section_new-task { margin-top: 16px; } -.section__list { +.section__title { + color: #333; + font-weight: 700; + font-size: 15px; + border-bottom: 2px solid #333; + padding: 30px 0 10px; margin: 0; - padding: 0px; + text-transform: uppercase; +} + +.list-item__element_new-task, +.list-item__element_task { + width: 56%; + display: inline-block; + flex-grow: 1; +} + +.list-item_new-task { + display: flex; } .section__list_new-task { padding: 0; } -/* .section__title, */ +.section__list_new-task, .list-item { list-style: none; } -.list-item__input_new-task, -.list-item__input, -.list-item__button { +.list-item__element_input_new-task, +.list-item__element_input, +.list-item__element_button { outline: none; } -.list-item__button { +.list-item__element_button { background: none; border: 0px; color: #888; @@ -76,23 +88,12 @@ cursor: pointer; } -.list-item__button:hover { +.list-item__element_button:hover { color: #3a3a3a; } -/* Heading */ -.section__title { - color: #333; - font-weight: 700; - font-size: 15px; - border-bottom: 2px solid #333; - padding: 30px 0 10px; - margin: 0; - text-transform: uppercase; -} - -.list-item__input_new-task, -.list-item__text-input { +.list-item__element_input_new-task, +.list-item__element_text-input { margin: 0; font-size: 18px; line-height: 18px; @@ -105,18 +106,18 @@ color: #888; } -.list-item__input_new-task:focus, -.list-item__text-input:focus { +.list-item__element_input_new-task:focus, +.list-item__element_text-input:focus { color: #333; } /* New Task */ -.section__tltle_new-task { +.section__title_new-task { display: block; margin: 0 0 20px; } -.new-task { +.list-item__element_new-task { width: 318px; } @@ -135,47 +136,47 @@ vertical-align: middle; } -.list-item__checkbox { +.list-item__element_checkbox { margin: 0 10px; } -.list-item__label { +.list-item__element_label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -.list-item__text-input { +.list-item__element_text-input { width: 226px; } -.list-item__delete_image { +.list-item__element_delete_image{ height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -.list-item__delete_image:hover { +.list-item__element_delete_image:hover { transform: rotateZ(0); } /* Completed */ -.completed-task .list-item .list-item__label { +.section__list_completed .list-item .list-item__element_label { text-decoration: line-through; color: #888; } /* Edit Task */ -.list-item__text-input { +.list-item__element_text-input { display: none; } -.list-item__edit-mode .list-item__text-input { +.list-item_edit-mode .list-item__element_text-input { display: inline-block; width: 224px; } -.list-item__edit-mode .list-item__label { +.list-item_edit-mode .list-item__element_label { display: none; } \ No newline at end of file From b2905778f1fe32c62c05a0c29d34551c3c4522af Mon Sep 17 00:00:00 2001 From: Alexander Suslov Date: Mon, 29 Nov 2021 04:51:09 +0300 Subject: [PATCH 19/19] fix: fix missed non devided element in css file according rule 3.6 in html-and-css.md --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index f198344c478..522a59996da 100644 --- a/style.css +++ b/style.css @@ -151,7 +151,7 @@ width: 226px; } -.list-item__element_delete_image{ +.list-item__element_delete_image { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in;