From 86c9802114a0a99511d4e44466f8ca50eca4fdc1 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 15:50:58 +0300 Subject: [PATCH 01/15] style(basic-1.2): change to lowercase index.html --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60c..a05d026d4f 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ -Todo App +Todo App - - + +
Want more details?

@@ -14,6 +14,6 @@
- + \ No newline at end of file From fecd01c8f7a44c172d873693d46ab6349d467a6e Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 15:55:01 +0300 Subject: [PATCH 02/15] style(basic-1.3): change to double quotes index.html --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index a05d026d4f..d6533234a5 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,15 @@ Todo App - + -
Want more details?
-

+
Want more details?
+

Todo

-
    -
    • -
    • +
      +
      • +

    Completed

    From 5d7aa330348ac6ad21ba1aa45a2c5306e98a3897 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 15:57:53 +0300 Subject: [PATCH 03/15] style(basic-1.3): change to double quotes style.css --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index ab36227705..6e104fed6e 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 867af3795e7f3a287bf2c5774621d1225e014a24 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 16:37:37 +0300 Subject: [PATCH 04/15] style(basic-2.1, basic-1.1): put every required element on a new line and add spaces index.html --- index.html | 71 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index d6533234a5..736a53f2a6 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,56 @@ -Todo App - - - - -
    Want more details?
    -

    -

    Todo

    -
      -
      • -
      • -

    Completed

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

    + +

    + + +
    +

    +

    Todo

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

    Completed

    +
      +
    • + + + + + +
      • +
    +
    + + \ No newline at end of file From 53047cf20b908f45f664a67aec974f6aa2a99b6f Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 16:39:35 +0300 Subject: [PATCH 05/15] 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 736a53f2a6..448acb9ee1 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + Todo App From f426602016f0109a497f1d2ed2fd98db7104d78b Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 16:45:37 +0300 Subject: [PATCH 06/15] style(basic-2.3): replace unnecessary named character references --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 448acb9ee1..7b2bc79d9d 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
    - Want more details? + Want more details?

    From d27a2a8744ee286291ec56181c95ff17605193b5 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 17:09:21 +0300 Subject: [PATCH 07/15] style(basic-2.4): delete unnecessary type attribute --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 7b2bc79d9d..a8e40c6342 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 02060b6acf2be7041a9c9b117db929ef8b9c5dfc Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 17:52:51 +0300 Subject: [PATCH 08/15] refactor(extended-1.1): use section, main and aside tags --- index.html | 82 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index a8e40c6342..94458beb9b 100644 --- a/index.html +++ b/index.html @@ -6,52 +6,56 @@ -
+
-
-

+ +

+
-

-

Todo

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

Completed

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

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+ \ No newline at end of file From c72a97cda328813906a33659fef61b6f1d7e1ded Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 17:57:27 +0300 Subject: [PATCH 09/15] refactor(extended-1.2): add alt attribute for imgs --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 94458beb9b..d3f637642e 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@
@@ -27,7 +27,7 @@

Todo

  • @@ -36,7 +36,7 @@

    Todo

    • @@ -50,7 +50,7 @@

    Completed

    From 2e7caa2193d422f5cedce1b8c29f4a657a01a446 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 18:03:27 +0300 Subject: [PATCH 10/15] fix(basic-3.7): add semicolon --- style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style.css b/style.css index 6e104fed6e..50e5266472 100644 --- a/style.css +++ b/style.css @@ -29,7 +29,7 @@ body { .task { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-row-wrapper { display: flex; @@ -116,7 +116,7 @@ li > label { width: 226px; } li > input[type="text"] { - width: 226px + width: 226px; } button.delete img { height: 2em; @@ -129,18 +129,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 a30cccb4f9c8882943a5c0e86c172a965e78e809 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 18:06:02 +0300 Subject: [PATCH 11/15] style(basic-3.6): add space after property names --- style.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/style.css b/style.css index 50e5266472..2c8f5af82d 100644 --- a/style.css +++ b/style.css @@ -35,14 +35,14 @@ body { display: flex; } ul { - margin:0; + margin: 0; padding: 0px; } li, h3 { - list-style:none; + list-style: none; } input,button{ - outline:none; + outline: none; } button { background: none; @@ -135,14 +135,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; + display: inline-block; + width: 224px; } ul li.editMode label { - display:none; + display: none; } \ No newline at end of file From 7ad0c566c6950924aff43f103bed43926486b8a2 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 18:13:14 +0300 Subject: [PATCH 12/15] style(basic-1.1): correct count of spaces --- style.css | 144 +++++++++++++++++++++++++++--------------------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/style.css b/style.css index 2c8f5af82d..df5a23624c 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 4e9f233435174229b34e10ac89d844832bd63f49 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Thu, 12 Dec 2024 18:16:05 +0300 Subject: [PATCH 13/15] style(basic-3.5): add indentation in blocks --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index df5a23624c..7f9794190b 100644 --- a/style.css +++ b/style.css @@ -18,7 +18,7 @@ body { } @media (max-width:768px) { -.aaa { text-align: center; + .aaa { text-align: center; } } .centered-main-page-element { From e929316cc911b3bbc8d7dd154fae544cd6648da8 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Fri, 13 Dec 2024 17:11:58 +0300 Subject: [PATCH 14/15] refactor(basic-3.1, basic-3.2, basic-3.3, extended-2.1): rename classes --- app.js | 30 +++++++++++------------ index.html | 72 +++++++++++++++++++++++++++--------------------------- style.css | 31 ++++++++++++----------- 3 files changed, 68 insertions(+), 65 deletions(-) diff --git a/app.js b/app.js index ab737a6002..b0700ab786 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 @@ -28,22 +28,22 @@ var createNewTaskElement=function(taskString){ //button.edit var editButton=document.createElement("button");//edit button - //button.delete + //button.tasks__button_delete var deleteButton=document.createElement("button");//delete button var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; - label.className='task'; + label.className='tasks__label'; //Each elements, needs appending checkBox.type="checkbox"; editInput.type="text"; - editInput.className="task"; + editInput.className="tasks__input"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + editButton.className="tasks__button_edit"; - deleteButton.className="delete"; + deleteButton.className="tasks__button_delete"; deleteButtonImg.src='./remove.svg'; deleteButton.appendChild(deleteButtonImg); @@ -84,12 +84,12 @@ 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 editBtn=listItem.querySelector(".tasks__button_edit"); + var containsClass=listItem.classList.contains("tasks__item_edit-mode"); + //If class of the parent is .tasks__item_edit-mode if(containsClass){ - //switch to .editmode + //switch to .tasks__item_edit-mode //label becomes the inputs value. label.innerText=editInput.value; editBtn.innerText="Edit"; @@ -98,8 +98,8 @@ var editTask=function(){ editBtn.innerText="Save"; } - //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + //toggle .tasks__item_edit-mode on the parent. + listItem.classList.toggle("tasks__item_edit-mode"); }; @@ -131,7 +131,7 @@ var taskIncomplete=function(){ console.log("Incomplete Task..."); //Mark task as incomplete. //When the checkbox is unchecked - //Append the task list item to the #incompleteTasks. + //Append the task list item to the #incomplete-tasks. var listItem=this.parentNode; incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem,taskCompleted); @@ -156,8 +156,8 @@ 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 editButton=taskListItem.querySelector(".tasks__button_edit"); + var deleteButton=taskListItem.querySelector(".tasks__button_delete"); //Bind editTask to edit button. diff --git a/index.html b/index.html index d3f637642e..13023d8519 100644 --- a/index.html +++ b/index.html @@ -6,51 +6,51 @@ -