From ec1b53577c1cf361342712d7451da581104f5c2c Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 16:32:12 +0300 Subject: [PATCH 01/17] :fix: add Html5 DOCTYPE tag according to rule 2.2 in html-and-css.md --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60ca..19e87213e1e 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + Todo App @@ -16,4 +16,4 @@ - \ No newline at end of file + From 1e7ebe7d0c628b060119865af547feabe18585d7 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 17:07:52 +0300 Subject: [PATCH 02/17] :refactor: adjust HTML-formatting according to rule 1.2 in html-and-css.md --- index.html | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 19e87213e1e..aa62eddc41c 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,9 @@ -Todo App - - - + + Todo App + + +
Want more details?

@@ -10,10 +11,14 @@
    • -

Completed

  • +
+

Completed

+
    +
+ From 46af6dc3c1db76c836b98e8940bf8332343a1409 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 17:17:12 +0300 Subject: [PATCH 03/17] :refactor: adjust HTML-formatting according to rule 2.4 in html-and-css.md --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index aa62eddc41c..4be30fb496b 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ Todo App - - + +
Want more details?
@@ -18,7 +18,7 @@

Completed

- + From c988cbcde62a6d9765aa6e13e92ad17011e13be7 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 17:27:23 +0300 Subject: [PATCH 04/17] :refactor: adjust HTML-formatting according to rule 1.3 in html-and-css.md --- index.html | 15 ++++++++------- style.css | 12 ++++++------ 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 4be30fb496b..76628c66b31 100644 --- a/index.html +++ b/index.html @@ -5,20 +5,21 @@ -
Want more details?
-

+
Want more details?
+

Todo

    -
    • -
    • +
    • +

Completed

-
    -
  • +
      +
- + + diff --git a/style.css b/style.css index ab36227705e..c8f515f61df 100644 --- a/style.css +++ b/style.css @@ -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,7 +79,7 @@ input[type="text"] { font-family: Lato, sans-serif; color: #888; } -input[type="text"]:focus { +input[type='text']:focus { color: #333; } @@ -106,7 +106,7 @@ li > * { vertical-align: middle; } -li > input[type="checkbox"] { +li > input[type='checkbox'] { margin: 0 10px; } li > label { @@ -115,7 +115,7 @@ li > label { font-size: 18px; width: 226px; } -li > input[type="text"] { +li > input[type='text'] { width: 226px } button.delete img { @@ -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 bb1b6477c8708c3b99b1146eb7ffe315c938bda6 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 17:36:32 +0300 Subject: [PATCH 05/17] :refactor: adjust HTML-formatting according to rule 1.2 in html-and-css.md --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 76628c66b31..d3259cac8b9 100644 --- a/index.html +++ b/index.html @@ -5,16 +5,16 @@ -
Want more details?
-

+
eisenhower matrixWant more details?
+

Todo

    -
    • -
    • +
    • +

Completed

    -
  • +
From e6ea459adabc064ad5e22b07575fc8948bce683e Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 17:48:44 +0300 Subject: [PATCH 06/17] :refactor: adjust HTML-formatting according to rule 1.3 in html-and-css.md --- index.html | 14 +++++++------- style.css | 12 ++++++------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index d3259cac8b9..b426ad71ed5 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,20 @@ Todo App - + -
eisenhower matrixWant more details?
-

+
eisenhower matrixWant more details?
+

Todo

-
    +
      • -
      • +

    Completed

    -
      -
    • +
        +
diff --git a/style.css b/style.css index c8f515f61df..2a854380b74 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; @@ -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,12 +79,12 @@ 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; } @@ -106,7 +106,7 @@ li > * { vertical-align: middle; } -li > input[type='checkbox'] { +li > input[type="checkbox"] { margin: 0 10px; } li > label { @@ -115,7 +115,7 @@ li > label { font-size: 18px; width: 226px; } -li > input[type='text'] { +li > input[type="text"] { width: 226px } button.delete img { From 6829a7ddefc44e9fe3954f91dc72e1ef012fe6b0 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 21:34:58 +0300 Subject: [PATCH 07/17] :refactor: adjust HTML-formatting according to rule 2.5 in html-and-css.md --- index.html | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index b426ad71ed5..05b35e7c1f4 100644 --- a/index.html +++ b/index.html @@ -5,16 +5,40 @@ -
eisenhower matrixWant more details?
-

+
eisenhower matrix + Want more details? +
+
+

+ +

+ +

Todo

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

Completed

    -
  • +
  • + + + + +
From 2db5c20f55cdd0f3a7275612c87d2f8d20bfc662 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 21:37:56 +0300 Subject: [PATCH 08/17] :refactor: adjust HTML-formatting according to rule 2.2 in html-and-css.md --- index.html | 78 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 40 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 05b35e7c1f4..85d60650552 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,51 @@ + Todo App - + + -
eisenhower matrix - Want more details? -
-
-

- +

eisenhower matrix + Want more details +
+
+

+

-
-

Todo

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

Completed

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

+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+ - + From 9203a6e6af790c9a60db5e0adc106a3a8290f9a6 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 21:52:15 +0300 Subject: [PATCH 09/17] :refactor: adjust HTML-formatting according to rule 3.4 in html-and-css.md --- style.css | 57 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 17 deletions(-) diff --git a/style.css b/style.css index 2a854380b74..2c0b80d314c 100644 --- a/style.css +++ b/style.css @@ -4,46 +4,59 @@ 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; + margin: 0; padding: 0px; } -li, h3 { - list-style:none; + +li, +h3 { + list-style: none; } -input,button{ - outline:none; + +input, +button { + outline: none; } + button { background: none; border: 0px; @@ -53,9 +66,11 @@ button { font-family: Lato, sans-serif; cursor: pointer; } + button:hover { color: #3a3A3a; } + /* Heading */ h3, label[for="new-task"] { @@ -67,6 +82,7 @@ label[for="new-task"] { margin: 0; text-transform: uppercase; } + input[type="text"] { margin: 0; font-size: 18px; @@ -79,6 +95,7 @@ input[type="text"] { font-family: Lato, sans-serif; color: #888; } + input[type="text"]:focus { color: #333; } @@ -88,6 +105,7 @@ label[for="new-task"] { display: block; margin: 0 0 20px; } + input#new-task { width: 318px; } @@ -102,47 +120,52 @@ li { justify-content: space-between; align-items: center; } -li > * { + +li>* { vertical-align: middle; } -li > input[type="checkbox"] { +li>input[type="checkbox"] { margin: 0 10px; } -li > label { + +li>label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { + +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); } /* Completed */ -ul#completed-tasks label { - text-decoration: line-through +#completed-tasks label { + 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 1ad79ceb8746453b8726aa925cc2f6da6f69a2ab Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 22:07:09 +0300 Subject: [PATCH 10/17] :refactor: adjust HTML-formatting according to rule 3.1 and 3.3 in html-and-css.md --- index.html | 14 +++++++------- style.css | 21 +++++++++++---------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 85d60650552..378f93deca5 100644 --- a/index.html +++ b/index.html @@ -7,25 +7,25 @@ -
eisenhower matrix - Want more details +
eisenhower matrix + Want more details
-
-

+

+

-

+

Todo

-
    +
      • -
    • +
    • diff --git a/style.css b/style.css index 2c0b80d314c..c9b15957ed5 100644 --- a/style.css +++ b/style.css @@ -5,28 +5,29 @@ body { font-family: Lato, sans-serif; } -.aaa { +.matrix-img { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa img { +.matrix-img img { width: 100%; } -.aaa .more_inf { +.matrix-img +.more-inf { font-family: fantasy, cursive; } @media (max-width:768px) { - .aaa { + .matrix-img { text-align: center; } } -.centered-main-page-element { +.main-page_element { display: block; width: 500px; margin: 0 auto 0; @@ -38,7 +39,7 @@ body { flex-grow: 1 } -.task-row-wrapper { +.task-row_wrapper { display: flex; } @@ -106,7 +107,7 @@ label[for="new-task"] { margin: 0 0 20px; } -input#new-task { +#new-task { width: 318px; } @@ -157,15 +158,15 @@ button.delete img:hover { } /* Edit Task */ -ul li input[type='text'] { +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 cf9b8da8fe391151d8ff315ba7721054405dcf3f Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 22:09:34 +0300 Subject: [PATCH 11/17] :refactor: adjust HTML-formatting according to rule 3.5 in html-and-css.md --- style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index c9b15957ed5..97ae9015ca0 100644 --- a/style.css +++ b/style.css @@ -22,9 +22,11 @@ body { } @media (max-width:768px) { + .matrix-img { text-align: center; } + } .main-page_element { @@ -116,7 +118,6 @@ li { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; - display: flex; justify-content: space-between; align-items: center; From 9e31bbd727e0802495dd2debb40c649a1436c91b Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 22:11:36 +0300 Subject: [PATCH 12/17] :refactor: adjust HTML-formatting according to rule 3.7 in html-and-css.md --- style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 97ae9015ca0..cba45e2b539 100644 --- a/style.css +++ b/style.css @@ -38,7 +38,7 @@ body { .task { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-row_wrapper { @@ -139,7 +139,7 @@ li>label { } li>input[type="text"] { - width: 226px + width: 226px; } button.delete img { @@ -165,7 +165,7 @@ ul li input[type="text"] { ul li.edit-mode input[type="text"] { display: inline-block; - width: 224px + width: 224px; } ul li.edit-mode label { From 083c4ef85fad0a22baec6e612eff9f9798690a7c Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 22:24:39 +0300 Subject: [PATCH 13/17] fix:add Header tag --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 378f93deca5..1330378772a 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,13 @@ Todo App - + -
      eisenhower matrix +
      eisenhower matrix Want more details -
      +

      From 416d77b1efdec2ee45500e2a7bccc8fb1cce64e2 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 22:26:58 +0300 Subject: [PATCH 14/17] fix:add Main tag --- index.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 1330378772a..2aff5d2fa19 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,11 @@ -

      eisenhower matrix +
      + eisenhower matrix Want more details
      -
      +

      @@ -43,7 +44,7 @@

      Completed

    -
+ From a258e1825c118340b8eb0a077cc6277d9565b430 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 22:56:59 +0300 Subject: [PATCH 15/17] fix: use of semantic layout and using BEM notation to form class names --- index.html | 87 +++++++++++++-------- style.css | 218 ++++++++++++++++++++++++----------------------------- 2 files changed, 152 insertions(+), 153 deletions(-) diff --git a/index.html b/index.html index 2aff5d2fa19..00f333f4853 100644 --- a/index.html +++ b/index.html @@ -7,44 +7,65 @@ -
+
eisenhower matrix - Want more details + Want more details
-
-

- -

- -
-

-

Todo

-
    -
  • - - - - +
    +
    +

    Add Item

    +
    + + +
    +
    +
    +

    Todo

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

    Completed

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

    Completed

    +
      +
    • + + + + +
      • -
    -
    +
+ +
diff --git a/style.css b/style.css index cba45e2b539..d6938dd6109 100644 --- a/style.css +++ b/style.css @@ -1,173 +1,151 @@ /* Basic Style */ body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; } -.matrix-img { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; +.wrapper { + display: block; + width: 500px; + margin: 0 auto 0; } -.matrix-img img { - width: 100%; +.header { + text-align: right; } -.matrix-img -.more-inf { - font-family: fantasy, cursive; -} - -@media (max-width:768px) { +@media (max-width: 768px) { - .matrix-img { - text-align: center; - } - -} + .header { + text-align: center; + } -.main-page_element { - display: block; - width: 500px; - margin: 0 auto 0; } -.task { - width: 56%; - display: inline-block; - flex-grow: 1; +.header__image { + display: block; + width: 100%; } -.task-row_wrapper { - display: flex; +.header__more-info { + font-family: fantasy, cursive; } -ul { - margin: 0; - padding: 0px; +.button { + width: 60px; + outline: none; + font-size: 15px; + font-family: Lato, sans-serif; + color: #888; + cursor: pointer; + background: none; + border: 0px; } -li, -h3 { - list-style: none; +.button:hover { + color: #3a3a3a; } -input, -button { - outline: none; +.button__image_delete { + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; } -button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; +.button__image_delete:hover { + transform: rotateZ(0); } -button:hover { - color: #3a3A3a; +.section_add { + margin: 0 0 15px; } /* 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; +.section__title { + margin: 0; + padding: 30px 0 10px; + font-size: 15px; + font-weight: 700; + color: #333; + text-transform: uppercase; + border-bottom: 2px solid #333; } -input[type="text"]:focus { - color: #333; -} - -/* New Task */ -label[for="new-task"] { - display: block; - margin: 0 0 20px; -} - -#new-task { - width: 318px; +.section__title_wrap { + margin: 15px 0 20px; } /* Task list */ -li { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - align-items: center; +.tasks { + margin: 0px; + padding: 0px; } -li>* { - vertical-align: middle; +.task, +.task__add { + display: flex; } -li>input[type="checkbox"] { - margin: 0 10px; +.task { + justify-content: space-between; + align-items: center; + padding: 20px 0; + overflow: hidden; + list-style: none; + border-bottom: 1px solid #eee; } -li>label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; +.task__checkbox { + margin: 0 10px; } -li>input[type="text"] { - width: 226px; +.task__label { + display: inline-block; + flex-grow: 1; + width: 226px; + box-sizing: border-box; + padding-left: 10px; + font-size: 18px; } -button.delete img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; +.task__input { + display: none; + flex-grow: 1; + margin: 0; + padding: 0 9px; + outline: none; + box-sizing: border-box; + height: 21px; + font-family: Lato, sans-serif; + font-size: 18px; + line-height: 21px; + color: #888; + background: #fff; + border: 1px solid #ddd; + border-radius: 6px; } -button.delete img:hover { - transform: rotateZ(0); +.task__input:focus { + color: #333; } -/* Completed */ -#completed-tasks label { - text-decoration: line-through; - color: #888; +.task__input_new { + display: inline-block; } /* Edit Task */ -ul li input[type="text"] { - display: none; +.task_edit .task__input { + display: inline-block; + width: 224px; } -ul li.edit-mode input[type="text"] { - display: inline-block; - width: 224px; +.task_edit .task__label { + display: none; } -ul li.edit-mode label { - display: none; -} \ No newline at end of file +/* Completed */ +.task_completed .task__label{ + text-decoration: line-through; + color: #888; +} From cde7e7fe69410ae20c158e6f2c06c5558338656d Mon Sep 17 00:00:00 2001 From: Nurlan Date: Mon, 31 Oct 2022 23:01:12 +0300 Subject: [PATCH 16/17] :fix: add Html5 lang tag according to rule 2.2 in html-and-css.md --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 00f333f4853..de18d0dbea0 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Todo App From 230855764549fe014eb31513529678bb3721cad9 Mon Sep 17 00:00:00 2001 From: Nurlan Date: Wed, 2 Nov 2022 21:02:17 +0300 Subject: [PATCH 17/17] :refactor: adjust HTML-formatting according to rule 2.1 in html-and-css.md --- app.js | 210 ++++++++++++++++++++++++++++++--------------------------- 1 file changed, 109 insertions(+), 101 deletions(-) diff --git a/app.js b/app.js index ab737a60027..415ecafee15 100644 --- a/app.js +++ b/app.js @@ -8,139 +8,147 @@ // Event handling, user interaction is what starts the code execution. -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 completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks +var taskInput=document.querySelector(".task__input_new");//Add a new task. +var addButton=document.querySelector(".task__button-add");//first button +var incompleteTaskHolder=document.querySelector(".tasks_incompleted");//ul of #incompleteTasks +var completedTasksHolder=document.querySelector(".tasks_completed");//completed-tasks //New task list item var createNewTaskElement=function(taskString){ - var listItem=document.createElement("li"); + var listItem=document.createElement("li"); - //input (checkbox) - var checkBox=document.createElement("input");//checkbx - //label - var label=document.createElement("label");//label - //input (text) - var editInput=document.createElement("input");//text - //button.edit - var editButton=document.createElement("button");//edit button + //input (checkbox) + var checkBox=document.createElement("input");//checkbx + //label + var label=document.createElement("label");//label + //input (text) + var editInput=document.createElement("input");//text + //button.edit + var editButton=document.createElement("button");//edit button - //button.delete - var deleteButton=document.createElement("button");//delete button - var deleteButtonImg=document.createElement("img");//delete button image + //button.delete + var deleteButton=document.createElement("button");//delete button + var deleteButtonImg=document.createElement("img");//delete button image - label.innerText=taskString; - label.className='task'; + listItem.classList.add("task"); - //Each elements, needs appending - checkBox.type="checkbox"; - editInput.type="text"; - editInput.className="task"; + label.innerText=taskString; + label.className='task__label'; - editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + //Each elements, needs appending + checkBox.type="checkbox"; + checkBox.classList.add("task__checkbox"); - deleteButton.className="delete"; - deleteButtonImg.src='./remove.svg'; - deleteButton.appendChild(deleteButtonImg); + editInput.type="text"; + editInput.className="task__input"; + editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. + editButton.classList.add("button", "task__button-edit"); - //and appending. - listItem.appendChild(checkBox); - listItem.appendChild(label); - listItem.appendChild(editInput); - listItem.appendChild(editButton); - listItem.appendChild(deleteButton); - return listItem; + deleteButton.classList.add("button", "task__button-delete"); + deleteButtonImg.src='./remove.svg'; + deleteButtonImg.alt='Remove TODO'; + deleteButtonImg.classList.add("button__image_delete"); + deleteButton.appendChild(deleteButtonImg); + + + //and appending. + listItem.appendChild(checkBox); + listItem.appendChild(label); + listItem.appendChild(editInput); + listItem.appendChild(editButton); + listItem.appendChild(deleteButton); + return listItem; } var addTask=function(){ - console.log("Add Task..."); - //Create a new list item with the text from the #new-task: - if (!taskInput.value) return; - var listItem=createNewTaskElement(taskInput.value); + console.log("Add Task..."); + //Create a new list item with the text from the #new-task: + if (!taskInput.value) return; + var listItem=createNewTaskElement(taskInput.value); - //Append listItem to incompleteTaskHolder - incompleteTaskHolder.appendChild(listItem); - bindTaskEvents(listItem, taskCompleted); + //Append listItem to incompleteTaskHolder + incompleteTaskHolder.appendChild(listItem); + bindTaskEvents(listItem, taskCompleted); - taskInput.value=""; + taskInput.value=""; } //Edit an existing task. var editTask=function(){ - console.log("Edit Task..."); - console.log("Change 'edit' to 'save'"); - - - var listItem=this.parentNode; - - var editInput=listItem.querySelector('input[type=text]'); - var label=listItem.querySelector("label"); - var editBtn=listItem.querySelector(".edit"); - var containsClass=listItem.classList.contains("editMode"); - //If class of the parent is .editmode - if(containsClass){ - - //switch to .editmode - //label becomes the inputs value. - label.innerText=editInput.value; - editBtn.innerText="Edit"; - }else{ - editInput.value=label.innerText; - editBtn.innerText="Save"; - } - - //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + console.log("Edit Task..."); + console.log("Change 'edit' to 'save'"); + + + var listItem=this.parentNode; + + var editInput=listItem.querySelector('.task__input'); + var label=listItem.querySelector(".task__label"); + var editBtn=listItem.querySelector(".task__button-edit"); + var containsClass=listItem.classList.contains("task_edit"); + //If class of the parent is .editmode + if(containsClass){ + + //switch to .editmode + //label becomes the inputs value. + label.innerText=editInput.value; + editBtn.innerText="Edit"; + }else{ + editInput.value=label.innerText; + editBtn.innerText="Save"; + } + + //toggle .editmode on the parent. + listItem.classList.toggle("task_edit"); }; //Delete task. var deleteTask=function(){ - console.log("Delete Task..."); + console.log("Delete Task..."); - var listItem=this.parentNode; - var ul=listItem.parentNode; - //Remove the parent list item from the ul. - ul.removeChild(listItem); + var listItem=this.parentNode; + var ul=listItem.parentNode; + //Remove the parent list item from the ul. + ul.removeChild(listItem); } //Mark task completed var taskCompleted=function(){ - console.log("Complete Task..."); + console.log("Complete Task..."); - //Append the task list item to the #completed-tasks - var listItem=this.parentNode; - completedTasksHolder.appendChild(listItem); - bindTaskEvents(listItem, taskIncomplete); + //Append the task list item to the #completed-tasks + var listItem=this.parentNode; + listItem.classList.add('task_completed'); + completedTasksHolder.appendChild(listItem); + bindTaskEvents(listItem, taskIncomplete); } var taskIncomplete=function(){ - console.log("Incomplete Task..."); -//Mark task as incomplete. - //When the checkbox is unchecked - //Append the task list item to the #incompleteTasks. - var listItem=this.parentNode; - incompleteTaskHolder.appendChild(listItem); - bindTaskEvents(listItem,taskCompleted); + console.log("Incomplete Task..."); + //Mark task as incomplete. + //When the checkbox is unchecked + //Append the task list item to the #incompleteTasks. + var listItem=this.parentNode; + listItem.classList.remove('task_completed'); + incompleteTaskHolder.appendChild(listItem); + bindTaskEvents(listItem,taskCompleted); } var ajaxRequest=function(){ - console.log("AJAX Request"); + console.log("AJAX Request"); } //The glue to hold it all together. @@ -153,27 +161,27 @@ addButton.addEventListener("click",ajaxRequest); var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ - console.log("bind list item events"); -//select ListItems children - var checkBox=taskListItem.querySelector("input[type=checkbox]"); - var editButton=taskListItem.querySelector("button.edit"); - var deleteButton=taskListItem.querySelector("button.delete"); - - - //Bind editTask to edit button. - editButton.onclick=editTask; - //Bind deleteTask to delete button. - deleteButton.onclick=deleteTask; - //Bind taskCompleted to checkBoxEventHandler. - checkBox.onchange=checkBoxEventHandler; + console.log("bind list item events"); + //select ListItems children + var checkBox=taskListItem.querySelector(".task__checkbox"); + var editButton=taskListItem.querySelector(".task__button-edit"); + var deleteButton=taskListItem.querySelector(".task__button-delete"); + + + //Bind editTask to edit button. + editButton.onclick=editTask; + //Bind deleteTask to delete button. + deleteButton.onclick=deleteTask; + //Bind taskCompleted to checkBoxEventHandler. + checkBox.onchange=checkBoxEventHandler; } //cycle over incompleteTaskHolder ul list items //for each list item for (var i=0; i