From 7061c11000b0bfd94386b495a97a4a5d933f825c Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 00:08:19 +0300 Subject: [PATCH 01/23] 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 ef4aa1f60c..72fb82e737 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + Todo App From bc0bbe67723a1c0a010ea0fb8485f4196189e7bb Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 00:10:49 +0300 Subject: [PATCH 02/23] refactor(basic-1.2): fix uppercase in head tag --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 72fb82e737..c10d6f0b81 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ -Todo App +Todo App - +
Want more details?

From 98c5ac619e30f2f5302e53d74424532a97850343 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 00:22:59 +0300 Subject: [PATCH 03/23] refactor(basic-1.1 and basic-2.1): fix indentation and add formatting for readability --- index.html | 59 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 45 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index c10d6f0b81..f601bed919 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,51 @@ -Todo App - - + + Todo App + + -
Want more details?
-

-

Todo

-
    -
    • -
    • -

Completed

  • -
    • -
-
- +
+ + Want more details? +
+
+

+ +

+ + +
+

+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+ \ No newline at end of file From 41436a5c2683f7bbd82fbf46ea996d84f10ada69 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 00:27:35 +0300 Subject: [PATCH 04/23] refactor(basic-1.3): change quotes from single to double --- index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index f601bed919..ef441bc110 100644 --- a/index.html +++ b/index.html @@ -2,26 +2,26 @@ Todo App - +
- Want more details? + Want more details?
-

+

- +

Todo

-
    +
    • - + @@ -31,7 +31,7 @@

      Todo

      - +
    From 2ef5277430aa7ba85b42baa4db440c4e09c683b7 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 00:30:58 +0300 Subject: [PATCH 05/23] refactor(basic-1.2): change uppercase to lowercase --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ef441bc110..87c4cc770b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Todo App - +
    @@ -46,6 +46,6 @@

    Completed

- + \ No newline at end of file From 36472568d36a08e99722475772d72e2d8e194b7a Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 00:33:11 +0300 Subject: [PATCH 06/23] refactor(basic-2.3): change named character reference to its representation --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 87c4cc770b..1591acf328 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
- Want more details? + Want more details?

From c26132c6a81bcec5d6b0ecbefb2ce3eaf192e269 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 00:36:17 +0300 Subject: [PATCH 07/23] refactor(basic-2.4): remove type attribute from link tags for css and js --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1591acf328..0946493d6b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Todo App - +

@@ -46,6 +46,6 @@

Completed

- + \ No newline at end of file From 46bfece031ba179445e20cf03a3682d6d34eee95 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 00:41:49 +0300 Subject: [PATCH 08/23] refactor(extended-1.2): add media alternatives --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 0946493d6b..05c00f5858 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@
- + eisenhower matrix image Want more details?
@@ -25,14 +25,14 @@

Todo

- +
  • - +

    • Completed

    @@ -42,7 +42,7 @@

    Completed

    - +
    From fd31475da3de9a30254a53977d030fa31c016a1d Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 01:15:29 +0300 Subject: [PATCH 09/23] refactor(basic-1.1 and basic-2.1): indent head and body tags. Additional formatting for readability --- index.html | 102 ++++++++++++++++++++++++++++------------------------- 1 file changed, 54 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index 05c00f5858..8b30a08a66 100644 --- a/index.html +++ b/index.html @@ -1,51 +1,57 @@ - - Todo App - - - - -
    - eisenhower matrix image - Want more details? -
    -
    -

    - -

    - - -
    -

    -

    Todo

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

    Completed

    -
      -
    • - - - - - -
      • -
    -
    - - + + Todo App + + + + +
    + eisenhower matrix image + Want more details? +
    +
    +

    + +

    + + +
    +

    +

    Todo

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

    Completed

    +
      +
    • + + + + + +
      • +
    +
    + + \ No newline at end of file From 8411d7fa70e079030160d35c61375256dd14c65f Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 01:22:07 +0300 Subject: [PATCH 10/23] refactor(basic-1.1): fix indentation in css file --- style.css | 144 +++++++++++++++++++++++++++--------------------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/style.css b/style.css index ab36227705..8bf81d3688 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 5b963b93c81e5eab3b0ab6db40c144181dfd158d Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 01:25:11 +0300 Subject: [PATCH 11/23] refactor(basic-1.2): fix upper case in css file --- style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 8bf81d3688..a7e20de76f 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 1089661de51486eb88262ec3fcff6f6a5b2682bb Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 01:26:59 +0300 Subject: [PATCH 12/23] refactor(basic-1.3): change single quotes to double in css file --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index a7e20de76f..d3718bdab8 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; } From c88ad567986763df304fad75d0e8b0b7c0188fb6 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 01:36:25 +0300 Subject: [PATCH 13/23] refactor(basic-3.1): add single style to selectors naming --- index.html | 8 ++++---- style.css | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 8b30a08a66..415eceb65b 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,10 @@
    eisenhower matrix image - Want more details? + Want more details?
    -

    +

    @@ -19,7 +19,7 @@

    Todo

    -
      +
      • @@ -29,7 +29,7 @@

        Todo

        delete button
        • -
      • +
      • diff --git a/style.css b/style.css index d3718bdab8..606f787bf6 100644 --- a/style.css +++ b/style.css @@ -13,7 +13,7 @@ body { .aaa img { width: 100%; } -.aaa .more_inf { +.aaa .more-information { font-family: fantasy, cursive; } @@ -138,11 +138,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 70f93b1ff436eaed5963be556e7c7031544aee23 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 01:43:51 +0300 Subject: [PATCH 14/23] refactor(basic-3.2): change classes and ids naming to more meaningfull --- index.html | 16 ++++++++-------- style.css | 10 +++++----- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 415eceb65b..c541a0522f 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ -
        +
        eisenhower matrix image Want more details?
        @@ -14,7 +14,7 @@

        - +

        @@ -22,8 +22,8 @@

        Todo

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

        diff --git a/style.css b/style.css index 4b9469ccae..5926c99966 100644 --- a/style.css +++ b/style.css @@ -21,7 +21,7 @@ body { .header { text-align: center; } } -.centered-main-page-element { +.main { display: block; width: 500px; margin: 0 auto 0; From 6dd8fe7ab03a94e33c19d2adeaabe96dad11864a Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 02:08:11 +0300 Subject: [PATCH 16/23] refactor(basic-3.4): remove tag selectors and replace them with classes --- index.html | 60 +++++++++++++++++++++++++++--------------------------- style.css | 48 +++++++++++++++++++++---------------------- 2 files changed, 54 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index 942dcbfff9..1f4014a2fb 100644 --- a/index.html +++ b/index.html @@ -5,49 +5,49 @@ - +
        - eisenhower matrix image + eisenhower matrix image Want more details?

        - +

        - - + +

        -

        Todo

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

        Completed

        -
          -
        • - - - - - +
        diff --git a/style.css b/style.css index 5926c99966..01bd7bc7f2 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ /* Basic Style */ -body { +.page { background-color: #f8f8f8; color: #333; font-family: Lato, sans-serif; @@ -10,7 +10,7 @@ body { display: block; text-align: right; } -.header img { +.header-image { width: 100%; } .header .more-information { @@ -34,17 +34,17 @@ body { .task-row-wrapper { display: flex; } -ul { +.task-list { margin:0; padding: 0px; } -li, h3 { +.task-item, .section-title { list-style:none; } -input,button{ +.task-input,.task-button{ outline:none; } -button { +.task-button { background: none; border: 0px; color: #888; @@ -53,12 +53,12 @@ button { font-family: Lato, sans-serif; cursor: pointer; } -button:hover { +.task-button:hover { color: #3a3a3a; } /* Heading */ -h3, -label[for="new-task"] { +.section-title, +.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"] { +.task-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 { +.task-input[type="text"]:focus { color: #333; } /* New Task */ -label[for="new-task"] { +.task-label[for="new-task"] { display: block; margin: 0 0 20px; } -input#new-task { +.task-input#new-task { width: 318px; } /* Task list */ -li { +.task-item { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; @@ -102,47 +102,47 @@ li { justify-content: space-between; align-items: center; } -li > * { +.task-item > * { vertical-align: middle; } -li > input[type="checkbox"] { +.task-item > .task-input[type="checkbox"] { margin: 0 10px; } -li > label { +.task-item > .task-label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { +.task-item > .task-input[type="text"] { width: 226px } -button.delete img { +.task-button.delete .button-image { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +.task-button.delete .button-image:hover { transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { +.task-list#completed-tasks .task-label { text-decoration: line-through color: #888; } /* Edit Task */ -ul li input[type=text] { +.task-list .task-item .task-input[type=text] { display:none } -ul li.edit-mode input[type=text] { +.task-list .task-item.edit-mode .task-input[type=text] { display:inline-block; width:224px } -ul li.edit-mode label { +.task-list .task-item.edit-mode .task-label { display:none; } \ No newline at end of file From bfd325352c2aca092cbd8d6f3cf0577ffaa15577 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 02:13:25 +0300 Subject: [PATCH 17/23] refactor(basic-3.5): add indentation in blocks in css file --- style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 01bd7bc7f2..e3aa158745 100644 --- a/style.css +++ b/style.css @@ -18,7 +18,8 @@ } @media (max-width:768px) { -.header { text-align: center; + .header { + text-align: center; } } .main { From a31e41acc7d8aa6ac0ba3fecaa491d7bc8bbd70f Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 02:17:02 +0300 Subject: [PATCH 18/23] refactor(basic-3.6): add spaces after colons in css --- style.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/style.css b/style.css index e3aa158745..33783f43b2 100644 --- a/style.css +++ b/style.css @@ -17,7 +17,7 @@ font-family: fantasy, cursive; } -@media (max-width:768px) { +@media (max-width: 768px) { .header { text-align: center; } @@ -36,14 +36,14 @@ display: flex; } .task-list { - margin:0; + margin: 0; padding: 0px; } .task-item, .section-title { - list-style:none; + list-style: none; } .task-input,.task-button{ - outline:none; + outline: none; } .task-button { background: none; @@ -136,14 +136,14 @@ /* Edit Task */ .task-list .task-item .task-input[type=text] { - display:none + display: none } .task-list .task-item.edit-mode .task-input[type=text] { - display:inline-block; - width:224px + display: inline-block; + width: 224px } .task-list .task-item.edit-mode .task-label { - display:none; + display: none; } \ No newline at end of file From cd74127be45c1c9fb52e5fff3386ecf53a85683f Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 02:21:01 +0300 Subject: [PATCH 19/23] fix(basic-3.7): add semicolon after properties in css --- style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style.css b/style.css index 33783f43b2..84fd1a2bc9 100644 --- a/style.css +++ b/style.css @@ -30,7 +30,7 @@ .task-text { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-row-wrapper { display: flex; @@ -117,7 +117,7 @@ width: 226px; } .task-item > .task-input[type="text"] { - width: 226px + width: 226px; } .task-button.delete .button-image { height: 2em; @@ -130,18 +130,18 @@ /* Completed */ .task-list#completed-tasks .task-label { - text-decoration: line-through + text-decoration: line-through; color: #888; } /* Edit Task */ .task-list .task-item .task-input[type=text] { - display: none + display: none; } .task-list .task-item.edit-mode .task-input[type=text] { display: inline-block; - width: 224px + width: 224px; } .task-list .task-item.edit-mode .task-label { From e2fe1bb923f7ab5f358a66dd5894d46ec0a7842d Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 03:32:46 +0300 Subject: [PATCH 20/23] refactor(extended-1.1): change generic tags to semantic --- index.html | 84 ++++++++++++++++++++++++++++-------------------------- style.css | 10 ++++--- 2 files changed, 50 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 1f4014a2fb..7ee4f7ba72 100644 --- a/index.html +++ b/index.html @@ -6,52 +6,56 @@ -
        +
        eisenhower matrix image Want more details? -
        -
        -

        - + +

        +
        +

        Add Item

        -

        -

        Todo

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

        Completed

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

        Todo

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

        Completed

        +
          +
        • + + + + + +
          • +
        +
        + \ No newline at end of file diff --git a/style.css b/style.css index 84fd1a2bc9..8e336c0899 100644 --- a/style.css +++ b/style.css @@ -39,10 +39,12 @@ margin: 0; padding: 0px; } -.task-item, .section-title { +.task-item, +.section-title { list-style: none; } -.task-input,.task-button{ +.task-input, +.task-button { outline: none; } .task-button { @@ -59,7 +61,7 @@ } /* Heading */ .section-title, -.task-label[for="new-task"] { +.task-label.new-task { color: #333; font-weight: 700; font-size: 15px; @@ -85,7 +87,7 @@ } /* New Task */ -.task-label[for="new-task"] { +.task-label.new-task { display: block; margin: 0 0 20px; } From cff6b1cf575edb5bebe30ca5bc0b766b6ec98195 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 23:18:20 +0300 Subject: [PATCH 21/23] refactor(basic-1.1): fix indentation from 4 to 2 spaces in js file --- app.js | 210 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 105 insertions(+), 105 deletions(-) diff --git a/app.js b/app.js index ab737a6002..b8e1332dae 100644 --- a/app.js +++ b/app.js @@ -17,130 +17,130 @@ var completedTasksHolder=document.getElementById("completed-tasks");//completed- //New task list item var createNewTaskElement=function(taskString){ - 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 - - //button.delete - var deleteButton=document.createElement("button");//delete button - var deleteButtonImg=document.createElement("img");//delete button image - - label.innerText=taskString; - label.className='task'; - - //Each elements, needs appending - checkBox.type="checkbox"; - editInput.type="text"; - editInput.className="task"; - - editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; - - deleteButton.className="delete"; - deleteButtonImg.src='./remove.svg'; - deleteButton.appendChild(deleteButtonImg); - - - //and appending. - listItem.appendChild(checkBox); - listItem.appendChild(label); - listItem.appendChild(editInput); - listItem.appendChild(editButton); - listItem.appendChild(deleteButton); - return listItem; + 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 + + //button.delete + var deleteButton=document.createElement("button");//delete button + var deleteButtonImg=document.createElement("img");//delete button image + + label.innerText=taskString; + label.className='task'; + + //Each elements, needs appending + checkBox.type="checkbox"; + editInput.type="text"; + editInput.className="task"; + + editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. + editButton.className="edit"; + + deleteButton.className="delete"; + deleteButtonImg.src='./remove.svg'; + 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('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"); }; //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; + 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; + 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 +153,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("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; } //cycle over incompleteTaskHolder ul list items //for each list item for (var i=0; i Date: Sun, 15 Dec 2024 23:23:43 +0300 Subject: [PATCH 22/23] refactor(extended-1.2): add media alternatives in js file --- app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app.js b/app.js index b8e1332dae..6b1536a05e 100644 --- a/app.js +++ b/app.js @@ -45,6 +45,7 @@ var createNewTaskElement=function(taskString){ deleteButton.className="delete"; deleteButtonImg.src='./remove.svg'; + deleteButtonImg.img = 'delete button'; deleteButton.appendChild(deleteButtonImg); From f2c9da4fa14300c606735c4b950aee8492f67293 Mon Sep 17 00:00:00 2001 From: Sartre666 Date: Sun, 15 Dec 2024 23:45:03 +0300 Subject: [PATCH 23/23] fix(basic-3.2): fix classes and identifiers in js file --- app.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/app.js b/app.js index 6b1536a05e..4962c49d44 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 @@ -18,6 +18,7 @@ var completedTasksHolder=document.getElementById("completed-tasks");//completed- var createNewTaskElement=function(taskString){ var listItem=document.createElement("li"); + listItem.className="task-item"; //input (checkbox) var checkBox=document.createElement("input");//checkbx @@ -33,19 +34,21 @@ var createNewTaskElement=function(taskString){ var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; - label.className='task'; + label.className='task-text task-label'; //Each elements, needs appending checkBox.type="checkbox"; + checkBox.className="task-input"; editInput.type="text"; - editInput.className="task"; + editInput.className="task-text task-input"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + editButton.className="edit task-button"; - deleteButton.className="delete"; + deleteButton.className="delete task-button"; deleteButtonImg.src='./remove.svg'; - deleteButtonImg.img = 'delete button'; + deleteButtonImg.alt = 'delete button'; + deleteButtonImg.className='button-image'; deleteButton.appendChild(deleteButtonImg); @@ -86,11 +89,11 @@ 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 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"; @@ -100,7 +103,7 @@ var editTask=function(){ } //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + listItem.classList.toggle("edit-mode"); };