From 5a570f738d6d7ae071b2bcc6ccec50ed90c3032d Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 20:22:37 +0300 Subject: [PATCH 01/14] feat: fixes according with 1.1 --- index.html | 45 +++++++++++----- style.css | 153 +++++++++++++++++++++++++++-------------------------- 2 files changed, 110 insertions(+), 88 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60..50999780e 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,36 @@ -Todo App - - + + + Todo App + + + -
Want more details?
-

-

Todo

-

Completed

-
- +
Want more details?
+
+

+

+

+

Todo

+ +

Completed

+ +
+ + + \ No newline at end of file diff --git a/style.css b/style.css index ab3622770..8296e6828 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,153 @@ /* 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 6672896e5684d290a5f3ad393dfa30e40c3612ba Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 20:26:50 +0300 Subject: [PATCH 02/14] fix: according with 1.2 General HTML & CSS rules --- index.html | 4 ++-- style.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 50999780e..2c49f59ff 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Todo App - + @@ -30,7 +30,7 @@

Completed

- + \ No newline at end of file diff --git a/style.css b/style.css index 8296e6828..840db8f9f 100644 --- a/style.css +++ b/style.css @@ -79,8 +79,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 aa442606538765ce25dedb632d594403d507e50e Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 20:28:04 +0300 Subject: [PATCH 03/14] fix: accroding with 1.3 General HTML & CSS rules --- index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 2c49f59ff..5c755ae17 100644 --- a/index.html +++ b/index.html @@ -2,23 +2,23 @@ Todo App - + -
Want more details?
-

-

+

+

Todo

-
    -

Completed

From 491badc9339cd7ab9fb630514b18d0c2f9dab6a3 Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 20:39:19 +0300 Subject: [PATCH 04/14] fix: according with 2.1 Formatting --- index.html | 48 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 35 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 5c755ae17..7c2e7f886 100644 --- a/index.html +++ b/index.html @@ -7,25 +7,47 @@ -
Want more details?
+
+ + Want more details? +
-

-

-

+

+
+ + +

Todo

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

Completed

    -
  • +
  • + + + + +
From 95fa1d06acd1210e4624ec4a08b4d6fdda48a9e3 Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 20:41:26 +0300 Subject: [PATCH 05/14] fix: according with 2.2 Document Type --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 7c2e7f886..343210830 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + Todo App From 95106d952feb568eea0df8becb9a1d6aa422dcdf Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 20:43:37 +0300 Subject: [PATCH 06/14] fix: according with 2.3 Named character references --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 343210830..f8e5beed5 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
- Want more details? + Want more details?

From 3525a91a9ecc63ac71d1701e45796a1f98dba6db Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 20:45:14 +0300 Subject: [PATCH 07/14] fix: according with 2.4. 'type' attribute --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index f8e5beed5..8a18b9e8b 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,8 @@ Todo App - - + + @@ -52,7 +52,7 @@

Completed

- + \ No newline at end of file From fac6f33c49f754d6e7fc99575b879b1d4585d4c4 Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 21:02:41 +0300 Subject: [PATCH 08/14] fix: according with 3.1. Single style for selectors naming --- index.html | 6 +++--- style.css | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 8a18b9e8b..26f0ca5d2 100644 --- a/index.html +++ b/index.html @@ -12,13 +12,13 @@ Want more details?
-

+

Todo

-
    +
    • @@ -28,7 +28,7 @@

      Todo

      • -
    • +
    • diff --git a/style.css b/style.css index 840db8f9f..a9e7a92a5 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; } @@ -47,7 +47,7 @@ ul { li, h3 { list-style:none; } -input,button{ +input, button{ outline:none; } button { @@ -120,7 +120,7 @@ li > label { font-size: 18px; width: 226px; } -li > input[type="text"] { +li > input[type="text"] { width: 226px } button.delete img { @@ -143,11 +143,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 727f378fa46ed58e5a6616c4ca9dff20e3c94330 Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 21:08:19 +0300 Subject: [PATCH 09/14] fix: according for 3.2. Meaningful naming of identifiers and classes: --- app.js | 6 +++--- index.html | 6 +++--- style.css | 8 ++++---- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app.js b/app.js index ab737a600..2cce02bd3 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 #incompleteTasks var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks @@ -85,7 +85,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("edit-mode"); //If class of the parent is .editmode if(containsClass){ @@ -99,7 +99,7 @@ var editTask=function(){ } //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + listItem.classList.toggle("edit-mode"); }; diff --git a/index.html b/index.html index 26f0ca5d2..36cd838d5 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,12 @@ -
      +
      - Want more details? + Want more details?
      -

      +

      diff --git a/style.css b/style.css index a9e7a92a5..74b4d91cd 100644 --- a/style.css +++ b/style.css @@ -4,21 +4,21 @@ body { color: #333; font-family: Lato, sans-serif; } -.aaa { +.want-more-details-wrapper { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa img { +.want-more-details-wrapper img { width: 100%; } -.aaa .more-inf { +.want-more-details-wrapper .more-inf { font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { +.want-more-details-wrapper { text-align: center; } } From 595b03f6d57e490d24151ccb337dceca9eb89eb7 Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 21:16:53 +0300 Subject: [PATCH 10/14] fix: according with 3.4. Tag selectors --- index.html | 4 ++-- style.css | 35 +++++++++++++++++++---------------- 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 36cd838d5..9a5e15e5d 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,11 @@ -
      +
      Want more details?
      -
      +

      diff --git a/style.css b/style.css index 74b4d91cd..aed3b76fd 100644 --- a/style.css +++ b/style.css @@ -4,26 +4,26 @@ body { color: #333; font-family: Lato, sans-serif; } -.want-more-details-wrapper { +.href-wrapper { width: 500px; margin: 0 auto; display: block; text-align: right; } -.want-more-details-wrapper img { +.href-wrapper img { width: 100%; } -.want-more-details-wrapper .more-inf { +.more-inf { font-family: fantasy, cursive; } @media (max-width:768px) { -.want-more-details-wrapper { - text-align: center; -} + .href-wrapper { + text-align: center; + } } -.centered-main-page-element { +.main-container { display: block; width: 500px; margin: 0 auto 0; @@ -47,10 +47,9 @@ ul { li, h3 { list-style:none; } -input, button{ - outline:none; -} + button { + outline:none; background: none; border: 0px; color: #888; @@ -94,7 +93,8 @@ label[for='new-task'] { display: block; margin: 0 0 20px; } -input#new-task { + +#new-task { width: 318px; } @@ -114,26 +114,29 @@ 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 { + +.delete img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +.delete img:hover { transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { +#completed-tasks label { text-decoration: line-through; color: #888; } @@ -143,11 +146,11 @@ ul li input[type=text] { display:none } -ul li.edit-mode input[type=text] { +.edit-mode input[type=text] { display:inline-block; width:224px } -ul li.edit-mode label { +.edit-mode label { display:none; } \ No newline at end of file From e984aa4d03e1abc99a58041154495a549d935e9b Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 21:21:51 +0300 Subject: [PATCH 11/14] fix: according with 3.6. Space after property name --- style.css | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/style.css b/style.css index aed3b76fd..86760a826 100644 --- a/style.css +++ b/style.css @@ -4,15 +4,18 @@ body { color: #333; font-family: Lato, sans-serif; } + .href-wrapper { width: 500px; margin: 0 auto; display: block; text-align: right; } + .href-wrapper img { width: 100%; } + .more-inf { font-family: fantasy, cursive; } @@ -32,7 +35,7 @@ body { .task { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-row-wrapper { @@ -40,16 +43,16 @@ body { } ul { - margin:0; + margin: 0; padding: 0px; } li, h3 { - list-style:none; + list-style: none; } button { - outline:none; + outline: none; background: none; border: 0px; color: #888; @@ -58,6 +61,7 @@ button { font-family: Lato, sans-serif; cursor: pointer; } + button:hover { color: #3a3A3a; } @@ -143,14 +147,14 @@ li > input[type="text"] { /* Edit Task */ ul li input[type=text] { - display:none + display: none; } .edit-mode input[type=text] { - display:inline-block; - width:224px + display: inline-block; + width: 224px; } .edit-mode label { - display:none; + display: none; } \ No newline at end of file From b806ec7e477a005be2d9d8e15830b08545ce0b5f Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 21:24:07 +0300 Subject: [PATCH 12/14] fix: according with 3.8. Separate selectors and properties --- style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 86760a826..c5f79543b 100644 --- a/style.css +++ b/style.css @@ -47,7 +47,8 @@ ul { padding: 0px; } -li, h3 { +li, +h3 { list-style: none; } @@ -76,6 +77,7 @@ label[for='new-task'] { margin: 0; text-transform: uppercase; } + input[type="text"] { margin: 0; font-size: 18px; @@ -88,6 +90,7 @@ input[type="text"] { font-family: Lato, sans-serif; color: #888; } + input[type="text"]:focus { color: #333; } @@ -111,6 +114,7 @@ li { justify-content: space-between; align-items: center; } + li > * { vertical-align: middle; } From 9a9d0aec54045d8b9b3ae3888c64f6b6b1ea5214 Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 21:26:17 +0300 Subject: [PATCH 13/14] fix: according with 1.2. Media alternatives --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9a5e15e5d..9b69ac62a 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
      - + Want more details?
      @@ -25,7 +25,7 @@

      Todo

    • @@ -34,7 +34,7 @@

      Todo

    @@ -46,7 +46,7 @@

    Completed

From 0d46a48f0dfd196798f8f006494dd2f498af2b57 Mon Sep 17 00:00:00 2001 From: stenyukovs Date: Sat, 7 Dec 2024 21:34:02 +0300 Subject: [PATCH 14/14] fix: according with 2.1. BEM --- app.js | 4 ++-- index.html | 2 +- style.css | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index 2cce02bd3..e2e35b9ec 100644 --- a/app.js +++ b/app.js @@ -85,7 +85,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("edit-mode"); + var containsClass=listItem.classList.contains("edit__mode"); //If class of the parent is .editmode if(containsClass){ @@ -99,7 +99,7 @@ var editTask=function(){ } //toggle .editmode on the parent. - listItem.classList.toggle("edit-mode"); + listItem.classList.toggle("edit__mode"); }; diff --git a/index.html b/index.html index 9b69ac62a..c0263223d 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@

Todo

-
  • +
  • diff --git a/style.css b/style.css index c5f79543b..40c47ab1c 100644 --- a/style.css +++ b/style.css @@ -154,11 +154,11 @@ ul li input[type=text] { display: none; } -.edit-mode input[type=text] { +.edit__mode input[type=text] { display: inline-block; width: 224px; } -.edit-mode label { +.edit__mode label { display: none; } \ No newline at end of file