From d71a0b9a839fae1bef19c4d21743032bf6313aa7 Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Tue, 10 Dec 2024 23:09:52 +0300 Subject: [PATCH 01/14] init: adding files for clean-code-s1e1 task --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index ef4aa1f60c..7166356e9a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ -Todo App + Todo App From 1c3fb64f50f6072f23174c4c77a0a54f0f0a0438 Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Wed, 11 Dec 2024 22:56:55 +0300 Subject: [PATCH 02/14] fix(basic-1.1): add two spaces in HTML and CSS --- index.html | 49 ++++++++++++++++++++++++++++++++----------------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 7166356e9a..2a73f03817 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,34 @@ - Todo App - - - - -
Want more details?
-

-

Todo

-
    -
    • -
    • -

Completed

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

+ +

+ + +
+

+

Todo

+
    +
    • +
    • +
+

Completed

+
    +
  • + +
    • +
+
+ + \ No newline at end of file From 1a637c16db14569dbe35897dd1916bf47ed4238e Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Wed, 11 Dec 2024 23:04:20 +0300 Subject: [PATCH 03/14] fix(basic-1.1): add two spaces in CSS --- style.css | 151 +++++++++++++++++++++++++++--------------------------- 1 file changed, 76 insertions(+), 75 deletions(-) diff --git a/style.css b/style.css index ab36227705..ebec843533 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,149 @@ /* 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; + 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 1c9dbfd4ccbe767db0c7ee59f22c5c5cf3889c6c Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Wed, 11 Dec 2024 23:15:36 +0300 Subject: [PATCH 04/14] fix(basic-1.2): use lowercase for HTML and CSS --- index.html | 8 ++++---- style.css | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 2a73f03817..2902804311 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ - + Todo App - - + +
@@ -29,6 +29,6 @@

Completed

- + \ No newline at end of file diff --git a/style.css b/style.css index ebec843533..3abdb1a6e1 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 6dc2879e957a9027043544afc7f1796e608ecedb Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Wed, 11 Dec 2024 23:25:24 +0300 Subject: [PATCH 05/14] fix(basic-1.3): add double qoutes for HTML and CSS --- index.html | 14 +++++++------- style.css | 8 ++++---- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 2902804311..b7dca4456c 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,26 @@ Todo App - +
- Want more details? + Want more details?
-

+

- +

Todo

-
    -
    • -
    • +
      +
      • +

    Completed

      diff --git a/style.css b/style.css index 3abdb1a6e1..b1fb7d8fc9 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; } @@ -135,11 +135,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 a73f0c2e1195cafb714d781ddf1616e8f2085d21 Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Sun, 15 Dec 2024 22:33:03 +0300 Subject: [PATCH 06/14] fix(basic-2.1): formatting HTML file --- index.html | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b7dca4456c..6679ecdc21 100644 --- a/index.html +++ b/index.html @@ -19,13 +19,35 @@

      Todo

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

      Completed

      • - + + + + +
From c1f1e18748af73a51f5fa07514e7b3f2cac48096 Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Sun, 15 Dec 2024 22:36:01 +0300 Subject: [PATCH 07/14] 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 6679ecdc21..c246e81408 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + Todo App From dae613a51512a54b591034b3e126b64840b94d5f Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Sun, 15 Dec 2024 22:44:58 +0300 Subject: [PATCH 08/14] fix(basic-2.3): remove character references --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c246e81408..9a2cf9b752 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
- Want more details? + Want more details?

From face1386dc419ed7d520bcfd684abbba93dc4c96 Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Sun, 15 Dec 2024 22:55:21 +0300 Subject: [PATCH 09/14] fix(basic-2.4): delete type attribute --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9a2cf9b752..de7824eec6 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 dcdf1e25394c67e9c5cbd09f493bfcdf9b7de262 Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Sun, 15 Dec 2024 23:05:54 +0300 Subject: [PATCH 10/14] fix(basic-2.5): add HTML Line-Wrapping --- index.html | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index de7824eec6..7bb0676e57 100644 --- a/index.html +++ b/index.html @@ -2,19 +2,36 @@ Todo App - - + +
- Want more details? + + Want more details? +

- +

@@ -32,7 +49,11 @@

Todo

  • - + diff --git a/style.css b/style.css index b1fb7d8fc9..a14d7a3cd9 100644 --- a/style.css +++ b/style.css @@ -4,38 +4,38 @@ body { color: #333; font-family: Lato, sans-serif; } -.aaa { +.header { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa img { +.header__image { width: 100%; } -.aaa .more_inf { +.header__more-inf { font-family: fantasy, cursive; } @media (max-width:768px) { - .aaa { + .header { text-align: center; } } -.centered-main-page-element { +.main-page__content { display: block; width: 500px; margin: 0 auto 0; } -.task { +.task-section__input { width: 56%; display: inline-block; flex-grow: 1 } -.task-row-wrapper { +.task-section__wrapper { display: flex; } -ul { +.content__list { margin:0; padding: 0px; } From 485ee4262ee4bbbbae316f41fd1fac43434a353e Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Mon, 16 Dec 2024 21:41:08 +0300 Subject: [PATCH 12/14] fix(basic-3.6): space property --- style.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index a14d7a3cd9..46e9d12d63 100644 --- a/style.css +++ b/style.css @@ -36,14 +36,14 @@ body { display: flex; } .content__list { - margin:0; + margin: 0; padding: 0px; } li, h3 { - list-style:none; + list-style: none; } input,button{ - outline:none; + outline: none; } button { background: none; @@ -136,14 +136,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 + width: 224px } ul li.editMode label { - display:none; + display: none; } \ No newline at end of file From 4e0bd973bc83a3799057024381cbee859576a9be Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Mon, 16 Dec 2024 21:44:07 +0300 Subject: [PATCH 13/14] fix(basic-3.7): Semicolon after properties --- style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index 46e9d12d63..660b08ed28 100644 --- a/style.css +++ b/style.css @@ -30,7 +30,7 @@ body { .task-section__input { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-section__wrapper { display: flex; @@ -130,18 +130,18 @@ 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 { From 318461e2f9328966fd612140a7213a669d3c5a12 Mon Sep 17 00:00:00 2001 From: Alexandr Kolos Date: Mon, 16 Dec 2024 21:51:34 +0300 Subject: [PATCH 14/14] fix(basic-3.8): Separate selectors --- style.css | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/style.css b/style.css index 660b08ed28..550437b3ff 100644 --- a/style.css +++ b/style.css @@ -16,7 +16,6 @@ body { .header__more-inf { font-family: fantasy, cursive; } - @media (max-width:768px) { .header { text-align: center; @@ -39,10 +38,12 @@ body { margin: 0; padding: 0px; } -li, h3 { +li, +h3 { list-style: none; } -input,button{ +input, +button { outline: none; } button { @@ -57,7 +58,6 @@ button { button:hover { color: #3a3a3a; } -/* Heading */ h3, label[for="new-task"] { color: #333; @@ -83,8 +83,6 @@ input[type="text"] { input[type="text"]:focus { color: #333; } - -/* New Task */ label[for="new-task"] { display: block; margin: 0 0 20px; @@ -92,8 +90,6 @@ label[for="new-task"] { input#new-task { width: 318px; } - -/* Task list */ li { overflow: hidden; padding: 20px 0; @@ -106,7 +102,6 @@ li { li > * { vertical-align: middle; } - li > input[type="checkbox"] { margin: 0 10px; } @@ -127,23 +122,17 @@ button.delete img { button.delete img:hover { transform: rotateZ(0); } - -/* Completed */ ul#completed-tasks label { text-decoration: line-through; color: #888; } - -/* Edit Task */ ul li input[type="text"] { display: none; } - ul li.editMode input[type="text"] { display:inline-block; width: 224px; } - ul li.editMode label { display: none; } \ No newline at end of file