From f83f5198b8bb7beecbac43902f61659223a37e00 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Wed, 19 Apr 2023 10:57:08 +0300 Subject: [PATCH 01/14] refactor (basic-2.1): update html according to rule --- index.html | 62 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60ca..2445e1e7c72 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,53 @@ -Todo App - - + + + Todo App + + + -
Want more details?
-

-

Todo

-

Completed

-
- +
+ Want more details? +
+
+

+ +

+ + +
+

+

Todo

+ +

Completed

+ +
+ + \ No newline at end of file From 07e449b33268f2d91f221842aba622620787dba6 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Wed, 19 Apr 2023 10:58:59 +0300 Subject: [PATCH 02/14] feat (basic-2.2): add DOCTYPE tag --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 2445e1e7c72..33e22389629 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -8,16 +9,15 @@
- Want more details? + Want more details?

-

- - -
+
+ + +

Todo

    From ffd5ea945aee1fddc1a56654028c33379afa8a54 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Wed, 19 Apr 2023 11:01:25 +0300 Subject: [PATCH 03/14] refactor (basic-2.3): remove mnemonics from html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 33e22389629..4a8571db565 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
    - Want more details? + Want more details?

    From 6bd75b9160b5bb0744dc450eb3cc5135d8204c4f Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Wed, 19 Apr 2023 11:03:30 +0300 Subject: [PATCH 04/14] refactor (basic-2.4): remove type attribute from html --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4a8571db565..02085f3b13e 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@ Todo App - - + + @@ -47,7 +47,7 @@

    Completed

- + \ No newline at end of file From be86ea117eff6db7fb458decb22b917a3c8c4cf7 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Wed, 19 Apr 2023 11:06:28 +0300 Subject: [PATCH 05/14] refactor (basic-1.2): update html to lowercase --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 02085f3b13e..c42b96ea27c 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,11 @@ - + Todo App - - + +
@@ -47,7 +47,7 @@

Completed

- + \ No newline at end of file From 46b6a488cf3db4a3dc5d8834481525ee7ef179df Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Thu, 20 Apr 2023 18:15:53 +0300 Subject: [PATCH 06/14] refactor(basic-1.3): replace single quotes with double quotes --- index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index c42b96ea27c..fd748ffd7df 100644 --- a/index.html +++ b/index.html @@ -3,26 +3,26 @@ Todo App - +
- Want more details? + Want more details?
-

+

- +

Todo

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

      Todo

      - +
    From 1964a172a68ca6e7c84a0d2e2ce1ccd75bb9d594 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Thu, 20 Apr 2023 18:21:33 +0300 Subject: [PATCH 07/14] fix(basic-3.4): add class for body --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index fd748ffd7df..639317419ef 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +
    Want more details?
    From 129dcb4f13c7317fad781250e180127cf7ce5bbb Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Thu, 20 Apr 2023 18:22:43 +0300 Subject: [PATCH 08/14] refactor(basic-2.1): update html according to rule --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 639317419ef..f36412a1049 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,8 @@ -
    +
    + Want more details?
    From 9289793d2ea27987247cef6c0487d7a8f7cb3f36 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Thu, 20 Apr 2023 18:59:05 +0300 Subject: [PATCH 09/14] refactor(basic-3.4): replace tag selectors --- app.js | 11 +++++++---- index.html | 46 +++++++++++++++++++++++----------------------- style.css | 52 +++++++++++++++++++++++++--------------------------- 3 files changed, 55 insertions(+), 54 deletions(-) diff --git a/app.js b/app.js index ab737a60027..a3c52caad35 100644 --- a/app.js +++ b/app.js @@ -32,18 +32,21 @@ var createNewTaskElement=function(taskString){ var deleteButton=document.createElement("button");//delete button var deleteButtonImg=document.createElement("img");//delete button image + listItem.className = "task-container"; + label.innerText=taskString; - label.className='task'; + label.className='task task-label'; //Each elements, needs appending checkBox.type="checkbox"; editInput.type="text"; - editInput.className="task"; + editInput.className="task task-input"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + editButton.className="task-button edit"; - deleteButton.className="delete"; + deleteButton.className="task-button delete"; + deleteButtonImg.className = "task-button-img"; deleteButtonImg.src='./remove.svg'; deleteButton.appendChild(deleteButtonImg); diff --git a/index.html b/index.html index f36412a1049..dafa1aa8c68 100644 --- a/index.html +++ b/index.html @@ -9,42 +9,42 @@
    - + Want more details?

    - +

    - - + +

    -

    Todo

    -
      -
    • +

      Todo

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

      Completed

      -
        -
      • +

        Completed

        +
          +
        • - - - - + + + +
    diff --git a/style.css b/style.css index ab36227705e..5d8a4493e87 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; } -.aaa img { +.aaa .main_img { width: 100%; } .aaa .more_inf { @@ -34,17 +34,17 @@ body { .task-row-wrapper { display: flex; } -ul { +.tasks { margin:0; padding: 0px; } -li, h3 { +.task-container, .tasks-type-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'] { +.tasks-type-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-container { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; @@ -102,47 +102,45 @@ li { justify-content: space-between; align-items: center; } -li > * { - vertical-align: middle; -} -li > input[type="checkbox"] { + +.task-container > .task-input[type="checkbox"] { margin: 0 10px; } -li > label { +.task-container > .task-label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { +.task-container > .task-input[type="text"] { width: 226px } -button.delete img { +.task-button.delete .task-button-img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +.task-button.delete .task-button-img:hover { transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { - text-decoration: line-through +.tasks#completed-tasks .task-label { + text-decoration: line-through; color: #888; } /* Edit Task */ -ul li input[type=text] { +.tasks .task-container .task-input[type=text] { display:none } -ul li.editMode input[type=text] { +.tasks .task-container.editMode .task-input[type=text] { display:inline-block; width:224px } -ul li.editMode label { +.tasks .task-container.editMode .task-label { display:none; } \ No newline at end of file From 5b0e422fd1cf2cbb5e8d90f2bddde08258760441 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Thu, 20 Apr 2023 19:04:28 +0300 Subject: [PATCH 10/14] refactor(basic-3.5): format styles --- style.css | 178 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 100 insertions(+), 78 deletions(-) diff --git a/style.css b/style.css index 5d8a4493e87..c7f1723712d 100644 --- a/style.css +++ b/style.css @@ -1,146 +1,168 @@ /* Basic Style */ .page { - 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 .main_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; } + .tasks { - margin:0; - padding: 0px; + margin: 0; + padding: 0px; } -.task-container, .tasks-type-title { - list-style:none; + +.task-container, +.tasks-type-title { + list-style: none; } -.task-input, .task-button{ - outline:none; + +.task-input, +.task-button { + outline: none; } + .task-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; } + .task-button:hover { - color: #3a3A3a; + color: #3a3A3a; } + /* Heading */ .tasks-type-title, .task-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; } + .task-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; } + .task-input[type="text"]:focus { - color: #333; + color: #333; } /* New Task */ .task-label[for='new-task'] { - display: block; - margin: 0 0 20px; + display: block; + margin: 0 0 20px; } + .task-input#new-task { - width: 318px; + width: 318px; } /* Task list */ .task-container { - 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; } -.task-container > .task-input[type="checkbox"] { - margin: 0 10px; +.task-container>.task-input[type="checkbox"] { + margin: 0 10px; } -.task-container > .task-label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; + +.task-container>.task-label { + padding-left: 10px; + box-sizing: border-box; + font-size: 18px; + width: 226px; } -.task-container > .task-input[type="text"] { - width: 226px + +.task-container>.task-input[type="text"] { + width: 226px } + .task-button.delete .task-button-img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; } + .task-button.delete .task-button-img:hover { - transform: rotateZ(0); + transform: rotateZ(0); } /* Completed */ .tasks#completed-tasks .task-label { - text-decoration: line-through; - color: #888; + text-decoration: line-through; + color: #888; } /* Edit Task */ .tasks .task-container .task-input[type=text] { - display:none + display: none } .tasks .task-container.editMode .task-input[type=text] { - display:inline-block; - width:224px + display: inline-block; + width: 224px } .tasks .task-container.editMode .task-label { - display:none; + display: none; } \ No newline at end of file From 403d3b76d56ddb8f1f0e4209bd33befa5a59d9bb Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Thu, 20 Apr 2023 21:42:04 +0300 Subject: [PATCH 11/14] refactor(basic-3.1): update class name according to BEM --- app.js | 28 +++++++++++++++------------- index.html | 42 +++++++++++++++++++++--------------------- style.css | 45 ++++++++++++++++++++++++--------------------- 3 files changed, 60 insertions(+), 55 deletions(-) diff --git a/app.js b/app.js index a3c52caad35..5e20301c3e9 100644 --- a/app.js +++ b/app.js @@ -8,8 +8,8 @@ // 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 taskInput=document.getElementById("new-task-input");//Add a new task. +var addButton=document.getElementById("new-task-btn");//first button var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks @@ -32,15 +32,17 @@ var createNewTaskElement=function(taskString){ var deleteButton=document.createElement("button");//delete button var deleteButtonImg=document.createElement("img");//delete button image - listItem.className = "task-container"; + listItem.className = "task"; label.innerText=taskString; - label.className='task task-label'; + label.className='task__label'; //Each elements, needs appending checkBox.type="checkbox"; + checkBox.className='task__checkbox'; + editInput.type="text"; - editInput.className="task task-input"; + editInput.className="task-input task__task-input"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. editButton.className="task-button edit"; @@ -85,10 +87,10 @@ var editTask=function(){ 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"); + 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-edited"); //If class of the parent is .editmode if(containsClass){ @@ -102,7 +104,7 @@ var editTask=function(){ } //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + listItem.classList.toggle("task-edited"); }; @@ -158,9 +160,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 editButton=taskListItem.querySelector("button.edit"); - var deleteButton=taskListItem.querySelector("button.delete"); + 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. diff --git a/index.html b/index.html index dafa1aa8c68..0bf25ae4716 100644 --- a/index.html +++ b/index.html @@ -8,41 +8,41 @@ -
    - - Want more details? +
    + + Want more details?
    -
    -

    - -

    - - +
    +

    + +

    + +

    Todo

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

    Completed

      -
    • - - - +
    • + + +
      • diff --git a/style.css b/style.css index c7f1723712d..a8566b54de8 100644 --- a/style.css +++ b/style.css @@ -5,40 +5,43 @@ font-family: Lato, sans-serif; } -.aaa { +.page-title { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa .main_img { +.page-title__img { width: 100%; } -.aaa .more_inf { +.page-title_info-link { font-family: fantasy, cursive; } @media (max-width:768px) { - .aaa { + + .page-title { text-align: center; } + } -.centered-main-page-element { +.wrapper { display: block; width: 500px; margin: 0 auto 0; } -.task { +.task__label, +.task-input { width: 56%; display: inline-block; flex-grow: 1 } -.task-row-wrapper { +.new-task-wrapper { display: flex; } @@ -47,7 +50,7 @@ padding: 0px; } -.task-container, +.task, .tasks-type-title { list-style: none; } @@ -73,7 +76,7 @@ /* Heading */ .tasks-type-title, -.task-label[for='new-task'] { +.new-task__label { color: #333; font-weight: 700; font-size: 15px; @@ -83,7 +86,7 @@ text-transform: uppercase; } -.task-input[type="text"] { +.task-input { margin: 0; font-size: 18px; line-height: 18px; @@ -96,22 +99,22 @@ color: #888; } -.task-input[type="text"]:focus { +.task-input:focus { color: #333; } /* New Task */ -.task-label[for='new-task'] { +.new-task__label { display: block; margin: 0 0 20px; } -.task-input#new-task { +.new-task__task-input { width: 318px; } /* Task list */ -.task-container { +.task { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; @@ -122,18 +125,18 @@ } -.task-container>.task-input[type="checkbox"] { +.task__checkbox { margin: 0 10px; } -.task-container>.task-label { +.task__label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -.task-container>.task-input[type="text"] { +.task__task-input { width: 226px } @@ -148,21 +151,21 @@ } /* Completed */ -.tasks#completed-tasks .task-label { +#completed-tasks .task__label { text-decoration: line-through; color: #888; } /* Edit Task */ -.tasks .task-container .task-input[type=text] { +.task__task-input { display: none } -.tasks .task-container.editMode .task-input[type=text] { +.task-edited .task__task-input { display: inline-block; width: 224px } -.tasks .task-container.editMode .task-label { +.task-edited .task__label { display: none; } \ No newline at end of file From cf675d422dcd9045a3dc5be762f01d7033cd1310 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Thu, 20 Apr 2023 21:42:28 +0300 Subject: [PATCH 12/14] refactor(basic-2.1): update js according to rule --- app.js | 220 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 110 insertions(+), 110 deletions(-) diff --git a/app.js b/app.js index 5e20301c3e9..1fbad59ffcc 100644 --- a/app.js +++ b/app.js @@ -8,186 +8,186 @@ // Event handling, user interaction is what starts the code execution. -var taskInput=document.getElementById("new-task-input");//Add a new task. -var addButton=document.getElementById("new-task-btn");//first button -var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks -var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks +var taskInput = document.getElementById("new-task-input");//Add a new task. +var addButton = document.getElementById("new-task-btn");//first button +var incompleteTaskHolder = document.getElementById("incompleteTasks");//ul of #incompleteTasks +var completedTasksHolder = document.getElementById("completed-tasks");//completed-tasks //New task list item -var createNewTaskElement=function(taskString){ +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 - listItem.className = "task"; + listItem.className = "task"; - label.innerText=taskString; - label.className='task__label'; + label.innerText = taskString; + label.className = 'task__label'; - //Each elements, needs appending - checkBox.type="checkbox"; - checkBox.className='task__checkbox'; + //Each elements, needs appending + checkBox.type = "checkbox"; + checkBox.className = 'task__checkbox'; - editInput.type="text"; - editInput.className="task-input task__task-input"; + editInput.type = "text"; + editInput.className = "task-input task__task-input"; - editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="task-button edit"; + editButton.innerText = "Edit"; //innerText encodes special characters, HTML does not. + editButton.className = "task-button edit"; - deleteButton.className="task-button delete"; - deleteButtonImg.className = "task-button-img"; - deleteButtonImg.src='./remove.svg'; - deleteButton.appendChild(deleteButtonImg); + deleteButton.className = "task-button delete"; + deleteButtonImg.className = "task-button-img"; + 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; + //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); +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); - //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 editTask = function () { + console.log("Edit Task..."); + console.log("Change 'edit' to 'save'"); - var listItem=this.parentNode; + 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-edited"); - //If class of the parent is .editmode - if(containsClass){ + 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-edited"); + //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"; - } + //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-edited"); + //toggle .editmode on the parent. + listItem.classList.toggle("task-edited"); }; //Delete task. -var deleteTask=function(){ - console.log("Delete Task..."); +var deleteTask = function () { + 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..."); +var taskCompleted = function () { + 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); +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); } -var ajaxRequest=function(){ - console.log("AJAX Request"); +var ajaxRequest = function () { + console.log("AJAX Request"); } //The glue to hold it all together. //Set the click handler to the addTask function. -addButton.onclick=addTask; -addButton.addEventListener("click",addTask); -addButton.addEventListener("click",ajaxRequest); +addButton.onclick = addTask; +addButton.addEventListener("click", addTask); +addButton.addEventListener("click", ajaxRequest); -var bindTaskEvents=function(taskListItem,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"); +var bindTaskEvents = function (taskListItem, 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; + //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: Fri, 21 Apr 2023 10:53:10 +0300 Subject: [PATCH 13/14] fix(extended-1.2): add alt atribute to imgs --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 0bf25ae4716..5aa3dcf78a5 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
      - + eisenhower matrix Want more details?
      @@ -27,14 +27,14 @@

      Todo

      - +
    • - +

    Completed

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

    Completed

    - +
From d40ea32897a99dbab5e97ec6a42069df41896076 Mon Sep 17 00:00:00 2001 From: "a.peshkov" Date: Fri, 21 Apr 2023 11:03:44 +0300 Subject: [PATCH 14/14] fix(extended-1.1): add semantic elements --- index.html | 72 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 38 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 5aa3dcf78a5..204a1b75a3e 100644 --- a/index.html +++ b/index.html @@ -8,46 +8,50 @@ -
+
eisenhower matrix - Want more details? -
-
-

+

Want more details?
+ +
+
-

-

Todo

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

Completed

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

Todo

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

Completed

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