From 627315e88cf2eab5f92ad548dcc5c8e49f380bde Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 20 Oct 2025 14:38:43 +0500 Subject: [PATCH 01/11] refactor(basic-1.1 and 2.1):update indentation and formatting in HTML code --- index.html | 61 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 49 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60c..9457b7c015 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,55 @@ -Todo App - - + + Todo App + + -
Want more details?
-

-

Todo

-

Completed

+
+ + Want more details? +
+
+

+ +

+ + +
+

+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
From 0d4eabc27b7bdaa5f321929d29cc05d990b07810 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 20 Oct 2025 14:50:59 +0500 Subject: [PATCH 02/11] refactor(basic-1.2): convert all HTML tags, attributes, and CSS selectors to lowercase --- index.html | 8 +-- style.css | 171 +++++++++++++++++++++++++++++------------------------ 2 files changed, 97 insertions(+), 82 deletions(-) diff --git a/index.html b/index.html index 9457b7c015..6cadb57e72 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ - + Todo App - - + +
@@ -13,7 +13,7 @@

- +

diff --git a/style.css b/style.css index ab36227705..d24c004d2d 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,163 @@ /* Basic Style */ body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; } + .aaa { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; + width: 500px; + margin: 0 auto; + display: block; + text-align: right; } + .aaa img { - width: 100%; + width: 100%; } + .aaa .more_inf { - font-family: fantasy, cursive; + font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { text-align: center; +.aaa { + text-align: center; } } + .centered-main-page-element { - display: block; - width: 500px; - margin: 0 auto 0; + display: block; + width: 500px; + margin: 0 auto 0; } + .task { - width: 56%; - display: inline-block; - flex-grow: 1 + width: 56%; + display: inline-block; + flex-grow: 1 } + .task-row-wrapper { - display: flex; + display: flex; } + ul { - margin:0; - padding: 0px; + margin:0; + padding: 0px; } + li, h3 { - list-style:none; + list-style:none; } + input,button{ - outline:none; + outline:none; } + button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; } + button:hover { - color: #3a3A3a; + color: #3a3a3a; } /* Heading */ h3, label[for='new-task'] { - color: #333; - font-weight: 700; - font-size: 15px; - border-bottom: 2px solid #333; - padding: 30px 0 10px; - margin: 0; - text-transform: uppercase; + color: #333; + font-weight: 700; + font-size: 15px; + border-bottom: 2px solid #333; + padding: 30px 0 10px; + margin: 0; + text-transform: uppercase; } + input[type="text"] { - margin: 0; - font-size: 18px; - line-height: 18px; - height: 21px; - padding: 0 9px; - border: 1px solid #dDd; - background: #FFF; - border-radius: 6px; - font-family: Lato, sans-serif; - color: #888; + margin: 0; + font-size: 18px; + line-height: 18px; + height: 21px; + padding: 0 9px; + border: 1px solid #ddd; + background: #fff; + border-radius: 6px; + font-family: Lato, sans-serif; + color: #888; } + input[type="text"]:focus { - color: #333; + color: #333; } - /* New Task */ label[for='new-task'] { - display: block; - margin: 0 0 20px; + display: block; + margin: 0 0 20px; } + input#new-task { - width: 318px; + width: 318px; } - /* Task list */ li { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; - - display: flex; - justify-content: space-between; - align-items: center; + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; + 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 2d1cac9ed4d9eb594c1649d7f25096507e6e288a Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 20 Oct 2025 14:54:55 +0500 Subject: [PATCH 03/11] refactor(basic-1.3): standardize quotes for HTML attributes to double quotes --- index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 6cadb57e72..21475354ee 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,26 @@ Todo App - +
- Want more details? + Want more details?
-

+

- +

Todo

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

      Todo

      - + From 9749acc181a560506142233dc65a66940927c43b Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 20 Oct 2025 16:20:06 +0500 Subject: [PATCH 04/11] 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 21475354ee..93fcc7cb40 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + Todo App From e4358dfe25d2ada52b7d143de007149b79bb4129 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 20 Oct 2025 16:30:00 +0500 Subject: [PATCH 05/11] fix(basic-2.3): update named character references in html --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 93fcc7cb40..4c50d09094 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
      - Want more details? + Want more details?

      @@ -52,6 +52,6 @@

      Completed

- + \ No newline at end of file From 74920c25818170846112dc74f002653aed0f324c Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 20 Oct 2025 16:33:08 +0500 Subject: [PATCH 06/11] fix(basic-2.4): remove 'type' attribute from style and script tags --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4c50d09094..2c3ecc47b0 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 57eabb6078076d167984b29e65751a811613b9d9 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 20 Oct 2025 17:32:04 +0500 Subject: [PATCH 07/11] fix(extended-2.1): improve semantic structure, add accessibility attributes, and update form elements --- index.html | 121 ++++++++++++++++++++++++++++------------------------- 1 file changed, 65 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index 2c3ecc47b0..9009aa450f 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,66 @@ - - - Todo App - - - - -
- - Want more details? -
-
-

- -

- - -
-

-

Todo

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

Completed

-
    -
  • - - - - - -
    • -
-
- - - \ No newline at end of file + + + + Todo App + + + + + +
+
+ + Want more details? +
+
+
+
+

Add Item

+
+ + + +
+
+
+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+
+ + + From ee51c27785f4b256a2b129bb9c1d3ce24d442698 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 20 Oct 2025 17:35:44 +0500 Subject: [PATCH 08/11] fix(extended-2.2): add media alternatives --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9009aa450f..f2dd1879cc 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
- + Матрица Эйзенхауэра: важное/срочное Want more details?
@@ -32,7 +32,7 @@

Todo

  • @@ -41,7 +41,7 @@

    Todo

    • @@ -55,7 +55,7 @@

    Completed

    From 666d2ebfe2404ace783297d52086e3f815b23bd8 Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 21 Oct 2025 13:37:28 +0500 Subject: [PATCH 09/11] fix(basic-3.1-3.4): standardize uniform naming style for selectors and use meaningful, concise identifiers and class names --- index.html | 72 ++++++++++++++++++++++---------------------- style.css | 87 ++++++++++++++++++++++++++++++------------------------ 2 files changed, 84 insertions(+), 75 deletions(-) diff --git a/index.html b/index.html index f2dd1879cc..5a6df0bc0c 100644 --- a/index.html +++ b/index.html @@ -9,53 +9,53 @@
    -
    - Матрица Эйзенхауэра: важное/срочное - Want more details? +
    + Матрица Эйзенхауэра: важное/срочное + Want more details?
    -
    -
    -

    Add Item

    -
    - - +
    +
    +

    Add Item

    + + +
    -
    -

    Todo

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

    Completed

    -
      -
    • - - - - - +
    diff --git a/style.css b/style.css index d24c004d2d..cc1398210b 100644 --- a/style.css +++ b/style.css @@ -1,63 +1,68 @@ -/* Basic Style */ body { background-color: #f8f8f8; color: #333; font-family: Lato, sans-serif; } -.aaa { +.hero__media { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa img { +.hero__image { width: 100%; + height: auto; + display: block; } -.aaa .more_inf { +.hero__more-info { font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { +.hero__media { text-align: center; } } -.centered-main-page-element { +.layout.layout--narrow { display: block; width: 500px; margin: 0 auto 0; } -.task { +.task-form__input { width: 56%; display: inline-block; flex-grow: 1 } -.task-row-wrapper { +.task-form { display: flex; } -ul { +.task-list { margin:0; - padding: 0px; + padding: 0; } -li, h3 { +.task-item, .task-section__title { list-style:none; } -input,button{ +.task-form__input, +.task-item__edit, +.task-form__submit, +.task-item__edit-btn, +.task-item__delete-btn { outline:none; } -button { +.task-form__submit { background: none; - border: 0px; + border: 0; color: #888; font-size: 15px; width: 60px; @@ -65,12 +70,14 @@ button { cursor: pointer; } -button:hover { +.task-form__submit:hover, +.task-item__edit-btn:hover, +.task-item__delete-btn:hover { color: #3a3a3a; } -/* Heading */ -h3, -label[for='new-task'] { + +.task-section__title, +.add-item__title { color: #333; font-weight: 700; font-size: 15px; @@ -80,7 +87,8 @@ label[for='new-task'] { text-transform: uppercase; } -input[type="text"] { +.task-form__input, +.task-item__edit { margin: 0; font-size: 18px; line-height: 18px; @@ -93,20 +101,21 @@ input[type="text"] { color: #888; } -input[type="text"]:focus { +.task-form__input:focus, +.task-item__edit:focus { color: #333; } -/* New Task */ -label[for='new-task'] { + +.add-item__title { display: block; margin: 0 0 20px; } -input#new-task { +#new-task.task-form__input { width: 318px; } -/* Task list */ -li { + +.task-item { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; @@ -115,49 +124,49 @@ li { align-items: center; } -li > * { +.task-item > * { vertical-align: middle; } -li > input[type="checkbox"] { +.task-item__checkbox { margin: 0 10px; } -li > label { +.task-item__label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { - width: 226px +.task-item__edit { + width: 226px; } -button.delete img { +.task-item__delete-icon{ height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +.task-item__delete-btn:hover .task-item__delete-icon { transform: rotateZ(0); } -/* Completed */ -ul#completed-tasks label { - text-decoration: line-through + +.task-list--completed .task-item__label { + text-decoration: line-through; color: #888; } -/* Edit Task */ -ul li input[type=text] { + +.task-item__edit { display:none } -ul li.editMode input[type=text] { +.task-item--editing .task-item__edit { display:inline-block; width:224px } -ul li.editMode label { +.task-item--editing .task-item__label { display:none; } \ No newline at end of file From c59f8466ef3bf61348e785a5f038b7770d9a8bea Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 21 Oct 2025 13:57:11 +0500 Subject: [PATCH 10/11] fix(basic-3.5-3.8): add indentation in blocks, spaces after property names, semicolons after properties, and line breaks between selectors and properties --- style.css | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/style.css b/style.css index cc1398210b..da1ba58b05 100644 --- a/style.css +++ b/style.css @@ -27,7 +27,8 @@ body { } } -.layout.layout--narrow { +.layout, +.layout--narrow { display: block; width: 500px; margin: 0 auto 0; @@ -36,7 +37,7 @@ body { .task-form__input { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } .task-form { @@ -44,12 +45,13 @@ body { } .task-list { - margin:0; + margin: 0; padding: 0; } -.task-item, .task-section__title { - list-style:none; +.task-item, +.task-section__title { + list-style: none; } .task-form__input, @@ -57,7 +59,7 @@ body { .task-form__submit, .task-item__edit-btn, .task-item__delete-btn { - outline:none; + outline: none; } .task-form__submit { @@ -143,30 +145,34 @@ body { width: 226px; } -.task-item__delete-icon{ +.task-item__delete-icon { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -.task-item__delete-btn:hover .task-item__delete-icon { +.task-item__delete-btn:hover, +.task-item__delete-icon { transform: rotateZ(0); } -.task-list--completed .task-item__label { +.task-list--completed, +.task-item__label { text-decoration: line-through; color: #888; } .task-item__edit { - display:none + display: none; } -.task-item--editing .task-item__edit { - display:inline-block; - width:224px +.task-item--editing, +.task-item__edit { + display: inline-block; + width: 224px; } -.task-item--editing .task-item__label { - display:none; +.task-item--editing, +.task-item__label { + display: none; } \ No newline at end of file From c39bc6a9aa7d3144422d421146dc10c121ae42bd Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 21 Oct 2025 15:35:43 +0500 Subject: [PATCH 11/11] refactor: improve HTML, CSS, and JS structure for stable and correct behavior --- app.js | 66 ++++++++++++++++++++++-------------------------------- index.html | 55 ++++++++++++++++++++++----------------------- style.css | 27 ++++++++++------------ 3 files changed, 66 insertions(+), 82 deletions(-) diff --git a/app.js b/app.js index ab737a6002..3ed4485034 100644 --- a/app.js +++ b/app.js @@ -9,42 +9,38 @@ // 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 addButton=document.querySelector(".task-form__submit");//first button +var incompleteTaskHolder=document.getElementById("todo-list");//ul of #incompleteTasks +var completedTasksHolder=document.getElementById("completed-list");//completed-tasks //New task list item var createNewTaskElement=function(taskString){ var listItem=document.createElement("li"); - + listItem.className = "task-item"; //input (checkbox) var checkBox=document.createElement("input");//checkbx + checkBox.type = "checkbox"; + checkBox.className = "task-item__checkbox"; //label var label=document.createElement("label");//label + label.className = "task-item__label"; + label.innerText = taskString; //input (text) var editInput=document.createElement("input");//text + editInput.type = "text"; + editInput.className = "task-item__edit"; //button.edit var editButton=document.createElement("button");//edit button - + editButton.innerText = "Edit"; + editButton.className = "task-item__edit-btn"; //button.delete var deleteButton=document.createElement("button");//delete button + deleteButton.className = "task-item__delete-btn"; 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'; + deleteButtonImg.src = "./remove.svg"; + deleteButtonImg.className = "task-item__delete-icon"; deleteButton.appendChild(deleteButtonImg); @@ -59,8 +55,8 @@ var createNewTaskElement=function(taskString){ -var addTask=function(){ - console.log("Add Task..."); +var addTask=function(e){ + if (e && typeof e.preventDefault === "function") e.preventDefault(); //Create a new list item with the text from the #new-task: if (!taskInput.value) return; var listItem=createNewTaskElement(taskInput.value); @@ -76,18 +72,15 @@ var addTask=function(){ //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"); + var editInput=listItem.querySelector(".task-item__edit"); + var label=listItem.querySelector(".task-item__label"); + var editBtn=listItem.querySelector(".task-item__edit-btn"); + var isEditing =listItem.classList.contains("task-item--editing"); //If class of the parent is .editmode - if(containsClass){ + if(isEditing){ //switch to .editmode //label becomes the inputs value. @@ -99,13 +92,12 @@ var editTask=function(){ } //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + listItem.classList.toggle("task-item--editing"); }; //Delete task. var deleteTask=function(){ - console.log("Delete Task..."); var listItem=this.parentNode; var ul=listItem.parentNode; @@ -117,8 +109,6 @@ var deleteTask=function(){ //Mark task completed var taskCompleted=function(){ - console.log("Complete Task..."); - //Append the task list item to the #completed-tasks var listItem=this.parentNode; completedTasksHolder.appendChild(listItem); @@ -128,7 +118,6 @@ var taskCompleted=function(){ var taskIncomplete=function(){ - console.log("Incomplete Task..."); //Mark task as incomplete. //When the checkbox is unchecked //Append the task list item to the #incompleteTasks. @@ -147,17 +136,16 @@ var ajaxRequest=function(){ //Set the click handler to the addTask function. -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("input[type=checkbox]"); - var editButton=taskListItem.querySelector("button.edit"); - var deleteButton=taskListItem.querySelector("button.delete"); + var checkBox=taskListItem.querySelector(".task-item__checkbox"); + var editButton=taskListItem.querySelector(".task-item__edit-btn"); + var deleteButton=taskListItem.querySelector(".task-item__delete-btn"); //Bind editTask to edit button. diff --git a/index.html b/index.html index 5a6df0bc0c..b17c1fb5ae 100644 --- a/index.html +++ b/index.html @@ -1,46 +1,45 @@ - + Todo App - + - +
    -
    +
    Матрица Эйзенхауэра: важное/срочное - Want more details? + Want more details?
    -
    +
    -

    Add Item

    -
    - - - +

    Add Item

    + + +

    Todo

    -
      +
      • - - - - - +
        • -
      • +
      • - - - - +
        • @@ -48,13 +47,13 @@

        Todo

    Completed

    -
      +
      • - - - - +
        • diff --git a/style.css b/style.css index da1ba58b05..e4180f7825 100644 --- a/style.css +++ b/style.css @@ -27,11 +27,10 @@ body { } } -.layout, -.layout--narrow { +.layout.layout--narrow { display: block; width: 500px; - margin: 0 auto 0; + margin: 0 auto; } .task-form__input { @@ -62,7 +61,9 @@ body { outline: none; } -.task-form__submit { +.task-form__submit, +.task-item__delete-btn, +.task-item__edit-btn { background: none; border: 0; color: #888; @@ -78,7 +79,7 @@ body { color: #3a3a3a; } -.task-section__title, +.task-section__title , .add-item__title { color: #333; font-weight: 700; @@ -89,7 +90,7 @@ body { text-transform: uppercase; } -.task-form__input, +.task-form__input , .task-item__edit { margin: 0; font-size: 18px; @@ -103,7 +104,7 @@ body { color: #888; } -.task-form__input:focus, +.task-form__input:focus , .task-item__edit:focus { color: #333; } @@ -151,13 +152,11 @@ body { transition: transform 200ms ease-in; } -.task-item__delete-btn:hover, -.task-item__delete-icon { +.task-item__delete-btn:hover .task-item__delete-icon { transform: rotateZ(0); } -.task-list--completed, -.task-item__label { +.task-list--completed .task-item__label { text-decoration: line-through; color: #888; } @@ -166,13 +165,11 @@ body { display: none; } -.task-item--editing, -.task-item__edit { +.task-item--editing .task-item__edit { display: inline-block; width: 224px; } -.task-item--editing, -.task-item__label { +.task-item--editing .task-item__label { display: none; } \ No newline at end of file