From 8d471785fca0a816231893b6eaae228a258d5a1d Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Sat, 6 Jan 2024 19:53:29 +1000 Subject: [PATCH 01/24] refactor: Refactor HTML and update CSS code for Todo App Refactor HTML code: - Improved code structure and formatting for better readability and maintainability - Added appropriate alt attributes to image tags for accessibility - Updated class names for consistency and clarity - Fixed missing closing tags and added proper indentation - Replaced uppercase tags with lowercase tags for HTML5 compliance - Corrected attribute values for media and type attributes in link tags - Changed script tag attribute from SRC to src - Moved script tag to the end of the body for optimized page loading Update CSS styles: - Reorganized and optimized CSS styles for better readability and maintainability - Adjusted container width and centered it horizontally - Updated class names for clarity and consistency - Added responsive styles for smaller screen sizes using media queries - Aligned task items and improved spacing and margins - Updated button styles and added hover effects - Improved input field styles and focus state - Added comments for better code documentation --- index.html | 83 ++++++++++++++++++++++++++++++++++++++++++------------ style.css | 75 ++++++++++++++++++++++++++++++------------------ 2 files changed, 112 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60c..97b08f6774 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,66 @@ - -Todo App - - - - -
Want more details?
-

-

Todo

-

Completed

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

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css index ab36227705..461d57291d 100644 --- a/style.css +++ b/style.css @@ -4,58 +4,69 @@ body { color: #333; font-family: Lato, sans-serif; } -.aaa { + +.container { width: 500px; margin: 0 auto; - display: block; - text-align: right; } -.aaa img { + +.container img { width: 100%; } -.aaa .more_inf { + +.container .more_inf { font-family: fantasy, cursive; + display: block; + text-align: right; } -@media (max-width:768px) { -.aaa { text-align: center; -} +@media (max-width: 768px) { + .container { + text-align: center; + } } + .centered-main-page-element { display: block; width: 500px; - margin: 0 auto 0; + margin: 0 auto; } + .task { width: 56%; display: inline-block; - flex-grow: 1 + flex-grow: 1; } + .task-row-wrapper { display: flex; } + ul { - margin:0; - padding: 0px; -} -li, h3 { - list-style:none; + margin: 0; + padding: 0; } -input,button{ - outline:none; + +li, +h3 { + list-style: none; } + button { + outline: none; background: none; - border: 0px; + border: 0; color: #888; font-size: 15px; width: 60px; - font-family: Lato, sans-serif; + font-family: Lato, sans-serif; cursor: pointer; } + button:hover { color: #3a3A3a; } + /* Heading */ h3, label[for='new-task'] { @@ -67,18 +78,20 @@ label[for='new-task'] { 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: 1px solid #ddd; + background: #fff; border-radius: 6px; font-family: Lato, sans-serif; color: #888; } + input[type="text"]:focus { color: #333; } @@ -88,6 +101,7 @@ label[for='new-task'] { display: block; margin: 0 0 20px; } + input#new-task { width: 318px; } @@ -102,6 +116,7 @@ li { justify-content: space-between; align-items: center; } + li > * { vertical-align: middle; } @@ -109,40 +124,44 @@ li > * { li > input[type="checkbox"] { margin: 0 10px; } + li > label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { - width: 226px + +li > input[type="text"] { + width: 226px; } + button.delete img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } + button.delete img:hover { transform: rotateZ(0); } /* Completed */ ul#completed-tasks label { - text-decoration: line-through + 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 5edaba4cd6b6ae8c9f13b9e80c19b5899d89f0f6 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 20:52:36 +1000 Subject: [PATCH 02/24] refactor(basic-1.1): change indentation from 4 spaces to 2 spaces in CSS and JS files --- app.js | 187 +++++++++++++++++++++---------------------------- style.css | 203 +++++++++++++++++++++++++----------------------------- 2 files changed, 169 insertions(+), 221 deletions(-) diff --git a/app.js b/app.js index ab737a6002..5c1e6ab93e 100644 --- a/app.js +++ b/app.js @@ -1,24 +1,8 @@ -//Document is the DOM can be accessed in the console with document.window. -// Tree is from the top, html, body, p etc. - -//Problem: User interaction does not provide the correct results. -//Solution: Add interactivity so the user can manage daily tasks. -//Break things down into smaller steps and take each step at a time. - - -// 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 - - //New task list item var createNewTaskElement=function(taskString){ var listItem=document.createElement("li"); - + //input (checkbox) var checkBox=document.createElement("input");//checkbx //label @@ -27,27 +11,27 @@ var createNewTaskElement=function(taskString){ 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); @@ -55,141 +39,124 @@ var createNewTaskElement=function(taskString){ listItem.appendChild(editButton); listItem.appendChild(deleteButton); return listItem; -} - - - -var addTask=function(){ + } + + + + 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); - + taskInput.value=""; - -} - -//Edit an existing task. - -var editTask=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"); //If class of the parent is .editmode if(containsClass){ - - //switch to .editmode - //label becomes the inputs value. - label.innerText=editInput.value; - editBtn.innerText="Edit"; + + //switch to .editmode + //label becomes the inputs value. + label.innerText=editInput.value; + editBtn.innerText="Edit"; }else{ - editInput.value=label.innerText; - editBtn.innerText="Save"; + editInput.value=label.innerText; + editBtn.innerText="Save"; } - + //toggle .editmode on the parent. listItem.classList.toggle("editMode"); -}; - - -//Delete task. -var deleteTask=function(){ + }; + + + //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); - -} - - -//Mark task completed -var taskCompleted=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); bindTaskEvents(listItem, taskIncomplete); - -} - - -var taskIncomplete=function(){ + + } + + + var taskIncomplete=function(){ console.log("Incomplete Task..."); -//Mark task as incomplete. + //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(){ + } + + + + 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); - - -var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ + } + + //The glue to hold it all together. + var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ console.log("bind list item events"); -//select ListItems children + //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 * { + } + li > * { vertical-align: middle; -} - -li > input[type="checkbox"] { + } + + li > input[type="checkbox"] { margin: 0 10px; -} - -li > label { + } + li > label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; -} - -li > input[type="text"] { - width: 226px; -} - -button.delete img { + } + li > input[type="text"] { + width: 226px + } + button.delete img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; -} - -button.delete img:hover { + } + button.delete img:hover { transform: rotateZ(0); -} - -/* Completed */ -ul#completed-tasks label { - text-decoration: line-through; + } + + /* Completed */ + ul#completed-tasks label { + text-decoration: line-through color: #888; -} - -/* Edit Task */ -ul li input[type=text] { - display: none; -} - -ul li.editMode input[type=text] { - display: inline-block; - width: 224px; -} - -ul li.editMode label { - display: none; -} \ No newline at end of file + } + + /* Edit Task */ + ul li input[type=text] { + display:none + } + + ul li.editMode input[type=text] { + display:inline-block; + width:224px + } + + ul li.editMode label { + display:none; + } \ No newline at end of file From 9e38b328d13587c10555892eaa98a7c2541e16bf Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 20:56:57 +1000 Subject: [PATCH 03/24] refactor(basic-1.2): convert some CSS and HTML code to lowercase --- index.html | 83 ++++------------ style.css | 283 ++++++++++++++++++++++++++--------------------------- 2 files changed, 155 insertions(+), 211 deletions(-) diff --git a/index.html b/index.html index 97b08f6774..b721535e81 100644 --- a/index.html +++ b/index.html @@ -1,66 +1,19 @@ - - - - - - Todo App - - - - -
-
- matrix - Want more details? -
-
-
- -
- - -
-
-

Todo

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

Completed

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

+

Todo

+
    +
    • +
    • +

Completed

  • +
    • +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css index 35e3964a39..357725e169 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,139 @@ /* Basic Style */ body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; - } - .aaa { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; - } - .aaa img { - width: 100%; - } - .aaa .more_inf { - font-family: fantasy, cursive; - } - - @media (max-width:768px) { - .aaa { text-align: center; - } - } - .centered-main-page-element { - display: block; - width: 500px; - margin: 0 auto 0; - } - .task { - width: 56%; - display: inline-block; - flex-grow: 1 - } - .task-row-wrapper { - display: flex; - } - ul { - margin:0; - padding: 0px; - } - li, h3 { - list-style:none; - } - input,button{ - outline:none; - } - button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; - } - button:hover { - 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; - } - 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; - } - input[type="text"]:focus { - color: #333; - } - - /* New Task */ - label[for='new-task'] { - display: block; - margin: 0 0 20px; - } - input#new-task { - width: 318px; - } - - /* Task list */ - li { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; - - display: flex; - justify-content: space-between; - align-items: center; - } - li > * { - vertical-align: middle; - } - - li > input[type="checkbox"] { - margin: 0 10px; - } - li > label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; - } - li > input[type="text"] { - width: 226px - } - button.delete img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; - } - button.delete img:hover { - transform: rotateZ(0); - } - - /* Completed */ - ul#completed-tasks label { - text-decoration: line-through - color: #888; - } - - /* Edit Task */ - ul li input[type=text] { - display:none - } - - ul li.editMode input[type=text] { - display:inline-block; - width:224px - } - - ul li.editMode label { - display:none; - } \ No newline at end of file + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; +} +.aaa { + width: 500px; + margin: 0 auto; + display: block; + text-align: right; +} +.aaa img { + width: 100%; +} +.aaa .more_inf { + font-family: fantasy, cursive; +} +@media (max-width:768px) { +.aaa { text-align: center; +} +} +.centered-main-page-element { + display: block; + width: 500px; + margin: 0 auto 0; +} +.task { + width: 56%; + display: inline-block; + flex-grow: 1 +} +.task-row-wrapper { + display: flex; +} +ul { + margin:0; + padding: 0px; +} +li, h3 { + list-style:none; +} +input,button{ + outline:none; +} +button { + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; +} +button:hover { + 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; +} +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; +} +input[type="text"]:focus { + color: #333; +} +/* New Task */ +label[for='new-task'] { + display: block; + margin: 0 0 20px; +} +input#new-task { + width: 318px; +} +/* Task list */ +li { + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; + display: flex; + justify-content: space-between; + align-items: center; +} +li > * { + vertical-align: middle; +} +li > input[type="checkbox"] { + margin: 0 10px; +} +li > label { + padding-left: 10px; + box-sizing: border-box; + font-size: 18px; + width: 226px; +} +li > input[type="text"] { + width: 226px +} +button.delete img { + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; +} +button.delete img:hover { + transform: rotateZ(0); +} +/* Completed */ +ul#completed-tasks label { + text-decoration: line-through + color: #888; +} +/* Edit Task */ +ul li input[type=text] { + display:none +} +ul li.editMode input[type=text] { + display:inline-block; + width:224px +} +ul li.editMode label { + display:none; +} \ No newline at end of file From fa1e4034e55f54c7ece6140c4292ac0486fc172e Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:01:37 +1000 Subject: [PATCH 04/24] refactor(basic-1.3): replace single quotes with double quotes --- app.js | 300 +++++++++++++++++++++++++---------------------------- index.html | 14 +-- style.css | 27 ++++- 3 files changed, 174 insertions(+), 167 deletions(-) diff --git a/app.js b/app.js index 5c1e6ab93e..1941afd105 100644 --- a/app.js +++ b/app.js @@ -1,162 +1,146 @@ +//Document is the DOM can be accessed in the console with document.window. +// Tree is from the top, html, body, p etc. +//Problem: User interaction does not provide the correct results. +//Solution: Add interactivity so the user can manage daily tasks. +//Break things down into smaller steps and take each step at a time. +// 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 //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 - 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); - - //Append listItem to incompleteTaskHolder - incompleteTaskHolder.appendChild(listItem); - bindTaskEvents(listItem, taskCompleted); - - 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"); - }; - - - //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); - - } - - - //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); - 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 ajaxRequest=function(){ - console.log("AJAX Request"); - } - - //The glue to hold it all together. - 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; - } - - //cycle over incompleteTaskHolder ul list items - //for each list item - for (var i=0; i -Todo App> - +Todo App + -
Want more details?
-

+
Want more details?
+

Todo

-
    -
    • -
    • +
      +
      • +

    Completed

    diff --git a/style.css b/style.css index 357725e169..c39b4f71d9 100644 --- a/style.css +++ b/style.css @@ -57,10 +57,21 @@ button:hover { } /* Heading */ h3, -label[for='new-task'] { +label[for="new-task"] { color: #333; font-weight: 700; font-size: 15px; + + + + + + + + Expand All + + @@ -84,7 +84,7 @@ input[type="text"]:focus { + border-bottom: 2px solid #333; padding: 30px 0 10px; margin: 0; @@ -81,11 +92,23 @@ input[type="text"] { input[type="text"]:focus { color: #333; } + /* New Task */ -label[for='new-task'] { +label[for="new-task"] { display: block; margin: 0 0 20px; } + + + + + + + + Expand Down + + + input#new-task { width: 318px; } From e1a4ed9e31855f43d0f0fe9132cee95b0d8a6798 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:03:25 +1000 Subject: [PATCH 05/24] refactor(basic-2.1): move each block element to a new line and add indents --- index.html | 71 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 54 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index d6533234a5..357df1cc8e 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 38c3ade494378304387491239efaa516ef1e9e35 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:05:54 +1000 Subject: [PATCH 06/24] fix(basic-2.2): add HTML5 first tag --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 357df1cc8e..8b94575f48 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + Todo App From 609a69492d066e9e42007a8c2e938400e913f9bf Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:07:13 +1000 Subject: [PATCH 07/24] refactor(basic-2.3): change the mnemonic symbol to a question mark --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 8b94575f48..b675e571f9 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,13 @@
    - Want more details? + Want more details?

    - + < id="new-task" class="task" type="text">

    From f443ddc2891c096b9a4fdb1807bd91a059b2fbc3 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:09:05 +1000 Subject: [PATCH 08/24] fix(basic-2.4): remove type attribute when connecting styles and script --- index.html | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b675e571f9..a161d27624 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,28 @@ Todo App - - + +
    + + + + + + + + Expand Down + + + + + + Expand Up + + @@ -52,6 +52,6 @@

    Completed

    + Want more details?
    @@ -14,7 +31,7 @@

    - < id="new-task" class="task" type="text"> +

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

    Completed

- + \ No newline at end of file From cf2ee1c607c2ad7fd14a996a82f043204d9d6160 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:11:00 +1000 Subject: [PATCH 09/24] refactor(extended-1.1): change some elements on semantic elements --- index.html | 109 +++++++++++++++++++++++------------------------------ style.css | 25 +++++++----- 2 files changed, 63 insertions(+), 71 deletions(-) diff --git a/index.html b/index.html index a161d27624..5c9954233f 100644 --- a/index.html +++ b/index.html @@ -6,69 +6,56 @@ -
- - - - - - - - Expand Down - - - - - - Expand Up - - @@ -52,6 +52,6 @@

Completed

- +
Want more details? -
-
-

- -

- - -
-

-

Todo

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

Completed

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

Add Item

+
+ + +
+
+
+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+
\ No newline at end of file diff --git a/style.css b/style.css index c39b4f71d9..1ddb95bb60 100644 --- a/style.css +++ b/style.css @@ -56,21 +56,26 @@ button:hover { color: #3a3a3a; } /* Heading */ -h3, -label[for="new-task"] { +h3 { color: #333; font-weight: 700; font-size: 15px; - + - - Expand All + + Expand Down + + - @@ -84,7 +84,7 @@ input[type="text"]:focus { + + + Expand Up + + @@ -88,7 +87,7 @@ label[for="new-task"] { border-bottom: 2px solid #333; padding: 30px 0 10px; @@ -92,12 +97,15 @@ input[type="text"] { input[type="text"]:focus { color: #333; } - /* New Task */ label[for="new-task"] { display: block; margin: 0 0 20px; } +.new-task { + width: 318px; +} + @@ -109,9 +117,6 @@ label[for="new-task"] { -input#new-task { - width: 318px; -} /* Task list */ li { overflow: hidden; From aab4003a65ddf72c1e5f99fb0a34ec34dafe2d0c Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:12:27 +1000 Subject: [PATCH 10/24] fix(extended-1.2): add attribute alt for images --- app.js | 26 +++++++++++++++----------- index.html | 52 ++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 63 insertions(+), 15 deletions(-) diff --git a/app.js b/app.js index 1941afd105..c6942eba61 100644 --- a/app.js +++ b/app.js @@ -22,10 +22,8 @@ var createNewTaskElement=function(taskString){ //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"; @@ -35,9 +33,21 @@ var createNewTaskElement=function(taskString){ deleteButton.className="delete"; deleteButtonImg.src="./remove.svg"; + deleteButtonImg.alt="delete Icon"; deleteButton.appendChild(deleteButtonImg); + + + + + + + + Expand Down + + + //and appending. listItem.appendChild(checkBox); listItem.appendChild(label); @@ -57,12 +67,11 @@ var addTask=function(){ 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); + var editInput=listItem.querySelector("input[type=text]"); var label=listItem.querySelector("label"); var editBtn=listItem.querySelector(".edit"); var containsClass=listItem.classList.contains("editMode"); @@ -81,7 +90,7 @@ var editTask=function(){ }; //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. @@ -89,7 +98,7 @@ var deleteTask=function(){ } //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); @@ -136,11 +145,6 @@ for (var i=0; i
- + Eisenhower matrix image Want more details?
+ + + + + + + + Expand All + + @@ -27,7 +27,7 @@

Todo

+

Add Item

@@ -27,19 +38,41 @@

Todo

  • + + + + + + + + Expand All + + @@ -36,7 +36,7 @@

    Todo

    +
    • + + + + + + + + Expand All + + @@ -50,7 +50,7 @@

    Completed

    +

    Completed

    @@ -50,10 +83,21 @@

    Completed

    + + + + + + + + Expand Down + + +
    From 4f522a59481c890da9b4b8bba21b1fb154ed7f66 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:14:38 +1000 Subject: [PATCH 11/24] refactor(extended-2.1, basic-3.1, 3.2, 3.3, 3.4): rewrite classes by BEM in CSS, HTML, JS files --- app.js | 196 +++++++++++++++++++++++++++++++++++++++-------------- index.html | 109 +++++++++++------------------ style.css | 109 +++++++++++------------------ 3 files changed, 227 insertions(+), 187 deletions(-) diff --git a/app.js b/app.js index c6942eba61..ed12e603fa 100644 --- a/app.js +++ b/app.js @@ -3,54 +3,61 @@ //Problem: User interaction does not provide the correct results. //Solution: Add interactivity so the user can manage daily tasks. //Break things down into smaller steps and take each step at a time. + // 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 + +const newTaskInput = document.querySelector(".task__input_new"); //Add a new task. +const addButton = document.querySelector(".task__button_add");//Button 'Add' +const todoList = document.querySelector(".task-list_todo");//ul of .task-list_todo +const completedTasksList = document.querySelector(".task-list_completed");//completed-tasks + + //New task list item var createNewTaskElement=function(taskString){ - var listItem=document.createElement("li"); + + const listItem = document.createElement("li"); + listItem.className = "task"; + //input (checkbox) - var checkBox=document.createElement("input");//checkbx + var checkBox=document.createElement("input");//checkbox + checkBox.className = "task__checkbox"; + checkBox.type="checkbox"; //label var label=document.createElement("label");//label + label.className='task__label'; + label.innerText=taskString; //input (text) var editInput=document.createElement("input");//text + editInput.className='task__input'; + editInput.type="text"; //button.edit var editButton=document.createElement("button");//edit button + editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. + editButton.className="task__button task__button_edit"; + //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"; + deleteButton.className="task__button task__button_delete"; deleteButtonImg.src="./remove.svg"; deleteButtonImg.alt="delete Icon"; + deleteButtonImg.className="task__delete-img"; deleteButton.appendChild(deleteButtonImg); - + //and appending. + listItem.appendChild(checkBox); + listItem.appendChild(label); + - - - Expand Down - + + Expand All + @@ -63,31 +60,31 @@ var createNewTaskElement=function(taskString){ - //and appending. - listItem.appendChild(checkBox); - listItem.appendChild(label); listItem.appendChild(editInput); listItem.appendChild(editButton); listItem.appendChild(deleteButton); @@ -59,25 +66,45 @@ var createNewTaskElement=function(taskString){ 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); + if (!newTaskInput.value) return; + var listItem=createNewTaskElement(newTaskInput.value); + + //Append listItem to todoList + todoList.appendChild(listItem); bindTaskEvents(listItem, taskCompleted); - taskInput.value=""; + + newTaskInput.value=""; + } + //Edit an existing task. + var editTask=function(){ console.log("Edit Task..."); - console.log("Change "edit" to "save""); + 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 + + var editInput=listItem.querySelector('.task__input'); + var label=listItem.querySelector(".task__label"); + var editBtn=listItem.querySelector(".task__button_edit"); + var containsClass=listItem.classList.contains("task_edit-mode"); + //If class of the parent is .edit-mode if(containsClass){ + //switch to .editmode + + + + + + + + Expand All + + @@ -99,8 +96,8 @@ var editTask=function(){ + //label becomes the inputs value. label.innerText=editInput.value; editBtn.innerText="Edit"; @@ -85,9 +112,23 @@ var editTask=function(){ editInput.value=label.innerText; editBtn.innerText="Save"; } - //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + + //toggle .edit-mode on the parent. + listItem.classList.toggle("task_edit-mode"); }; + + + + + + + + + + Expand All + + @@ -122,7 +119,7 @@ var taskCompleted=function(){ + //Delete task. var deleteTask=function(){ console.log("Delete Task..."); @@ -99,20 +140,45 @@ 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); + completedTasksList.appendChild(listItem); bindTaskEvents(listItem, taskIncomplete); + } + + + + + + + + Expand All + + @@ -132,9 +129,9 @@ var taskIncomplete=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. + //Append the task list item to the .task-list_todo. var listItem=this.parentNode; - incompleteTaskHolder.appendChild(listItem); + todoList.appendChild(listItem); bindTaskEvents(listItem,taskCompleted); } + + + + + + + + + Expand All + + @@ -156,9 +153,9 @@ addButton.addEventListener("click",ajaxRequest); + var ajaxRequest=function(){ console.log("AJAX Request"); } @@ -124,27 +190,59 @@ 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. + + + + + + + + Expand All + + @@ -169,21 +166,21 @@ var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ + editButton.onclick=editTask; //Bind deleteTask to delete button. deleteButton.onclick=deleteTask; //Bind taskCompleted to checkBoxEventHandler. checkBox.onchange=checkBoxEventHandler; } -//cycle over incompleteTaskHolder ul list items + +//cycle over todoList ul list items //for each list item -for (var i=0; i - -
    - Eisenhower matrix image - Want more details? + +
    + + Eisenhower matrix image + Want more details? +
    -
    - - - - - - - - Expand All - - @@ -27,7 +27,7 @@

    Todo

    - -
    -

    Add Item

    -
    - - +
    +
    +

    Add Item

    +
    + +
    -
    -

    Todo

    -
      -
    • - - - - - +
      • -
    • - - - - - - - - Expand All - - @@ -36,7 +36,7 @@

      Todo

      - - - - - - +
    - - - - - - - - Expand All - - @@ -50,7 +50,7 @@

    Completed

    -
    -
    -

    Completed

    -
      -
    • - - - - - +
    diff --git a/style.css b/style.css index 1ddb95bb60..4debf0987c 100644 --- a/style.css +++ b/style.css @@ -1,167 +1,140 @@ /* Basic Style */ -body { +.page { background-color: #f8f8f8; color: #333; font-family: Lato, sans-serif; } -.aaa { +.header { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa img { +.header__img { width: 100%; } -.aaa .more_inf { +.header__link { font-family: fantasy, cursive; } + @media (max-width:768px) { -.aaa { text-align: center; +.header { text-align: center; } } -.centered-main-page-element { +.main { display: block; width: 500px; margin: 0 auto 0; } -.task { +.task__label, +.task__input { width: 56%; display: inline-block; flex-grow: 1 } -.task-row-wrapper { +.task_new { display: flex; } +.task__input_new { + display: inline-block; +} ul { margin:0; padding: 0px; } -li, h3 { +li { list-style:none; } input,button{ outline:none; } -button { +.task__button { background: none; border: 0px; color: #888; - font-size: 15px; - width: 60px; + @@ -53,7 +57,7 @@ button { font-family: Lato, sans-serif; cursor: pointer; } -button:hover { +.task__button:hover { color: #3a3a3a; } /* Heading */ -h3 { - color: #333; - font-weight: 700; - font-size: 15px; - - - - - - - - Expand Down - - - - - - Expand Up - - @@ -88,7 +87,7 @@ label[for="new-task"] { - - border-bottom: 2px solid #333; - padding: 30px 0 10px; + @@ -66,7 +70,7 @@ h3 { margin: 0; text-transform: uppercase; } -input[type="text"] { +.task__input { margin: 0; font-size: 18px; line-height: 18px; - height: 21px; - padding: 0 9px; - border: 1px solid #ddd; - background: #fff; - border-radius: 6px; + @@ -78,21 +82,21 @@ input[type="text"] { font-family: Lato, sans-serif; color: #888; } -input[type="text"]:focus { +.task__input:focus { color: #333; } + /* New Task */ -label[for="new-task"] { +.task-section__title_new { display: block; margin: 0 0 20px; } -.new-task { +.task__input_new { width: 318px; } - - - - - - - - Expand Down - - - /* Task list */ -li { +.task { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; - display: flex; + @@ -101,47 +105,47 @@ li { justify-content: space-between; align-items: center; } -li > * { +.task > * { vertical-align: middle; } -li > input[type="checkbox"] { + +.task__checkbox { margin: 0 10px; } -li > label { +.task__label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { +.task__input { width: 226px } -button.delete img { +.task__delete-img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +.task__delete-img:hover { transform: rotateZ(0); } + /* Completed */ -ul#completed-tasks label { +.task-list_completed .task__label { text-decoration: line-through color: #888; } + /* Edit Task */ -ul li input[type=text] { +.task__input { display:none } -ul li.editMode input[type=text] { + +.task_edit-mode .task__input { display:inline-block; width:224px } -ul li.editMode label { + +.task_edit-mode .task__label { display:none; } \ No newline at end of file From 583c00a531da56e57aea1c6b09d4f29ffd3a1f08 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:15:38 +1000 Subject: [PATCH 12/24] refactor: add line break between CSS blocks --- style.css | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 108 insertions(+), 7 deletions(-) diff --git a/style.css b/style.css index 4debf0987c..0c0d250595 100644 --- a/style.css +++ b/style.css @@ -4,96 +4,186 @@ color: #333; font-family: Lato, sans-serif; } + .header { width: 500px; margin: 0 auto; display: block; text-align: right; } + .header__img { width: 100%; } + .header__link { font-family: fantasy, cursive; } + + + + + + + Expand All + + @@ -21,33 +24,41 @@ + @media (max-width:768px) { .header { text-align: center; } } + .main { display: block; width: 500px; margin: 0 auto 0; } + .task__label, .task__input { width: 56%; display: inline-block; flex-grow: 1 } + .task_new { display: flex; } + .task__input_new { display: inline-block; } + ul { margin:0; padding: 0px; } + li { list-style:none; } + input,button{ outline:none; } + .task__button { background: none; border: 0px; + + + + + + + + Expand All + + @@ -57,9 +68,11 @@ input,button{ + color: #888; - @@ -53,7 +57,7 @@ button { + font-size: 15px; + width: 60px; font-family: Lato, sans-serif; cursor: pointer; } + .task__button:hover { color: #3a3a3a; } + /* Heading */ - @@ -66,7 +70,7 @@ h3 { +h3 { + color: #333; + + + + + + + + Expand All + + @@ -70,6 +83,7 @@ h3 { + + font-weight: 700; + font-size: 15px; + border-bottom: 2px solid #333; + padding: 30px 0 10px; margin: 0; text-transform: uppercase; } + .task__input { margin: 0; font-size: 18px; + + + + + + + + Expand All + + @@ -82,6 +96,7 @@ h3 { + line-height: 18px; - @@ -78,21 +82,21 @@ input[type="text"] { + height: 21px; + padding: 0 9px; + border: 1px solid #ddd; + background: #fff; + border-radius: 6px; font-family: Lato, sans-serif; color: #888; } + .task__input:focus { color: #333; } + + + + + + + Expand All + + @@ -91,6 +106,7 @@ h3 { + /* New Task */ .task-section__title_new { display: block; margin: 0 0 20px; } + .task__input_new { width: 318px; } + + + + + + + Expand All + + @@ -105,27 +121,32 @@ h3 { + /* Task list */ .task { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; - @@ -101,47 +105,47 @@ li { + display: flex; justify-content: space-between; align-items: center; } + .task > * { vertical-align: middle; } @@ -101,40 +191,51 @@ input,button{ .task__checkbox { margin: 0 10px; } + .task__label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } + .task__input { width: 226px } + .task__delete-img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } + .task__delete-img:hover { transform: rotateZ(0); } + + + + + + + Expand Down + + + /* Completed */ .task-list_completed .task__label { text-decoration: line-through color: #888; } - /* Edit Task */ .task__input { display:none } - .task_edit-mode .task__input { display:inline-block; width:224px } - .task_edit-mode .task__label { display:none; } \ No newline at end of file From 32d5fbace29a2241fc573e7d599d37167cf0e517 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:16:35 +1000 Subject: [PATCH 13/24] refactor(basic-3.5): add indentation for block content --- style.css | 108 ++++++------------------------------------------------ 1 file changed, 11 insertions(+), 97 deletions(-) diff --git a/style.css b/style.css index 0c0d250595..b3a798ad1b 100644 --- a/style.css +++ b/style.css @@ -4,110 +4,77 @@ color: #333; font-family: Lato, sans-serif; } - .header { width: 500px; margin: 0 auto; display: block; text-align: right; } - .header__img { width: 100%; } - .header__link { font-family: fantasy, cursive; } +@media (max-width:768px) { + .header { text-align: center; + } +} + +.main { + - + - - Expand All + + Expand Down + - @@ -21,33 +24,41 @@ -@media (max-width:768px) { -.header { text-align: center; -} -} - -.main { display: block; width: 500px; margin: 0 auto 0; } - .task__label, .task__input { width: 56%; display: inline-block; flex-grow: 1 } - .task_new { display: flex; } - .task__input_new { display: inline-block; } - ul { margin:0; padding: 0px; } - li { list-style:none; } - input,button{ outline:none; } - .task__button { background: none; border: 0px; - - - - - - - - Expand All - - @@ -57,9 +68,11 @@ input,button{ - color: #888; font-size: 15px; width: 60px; font-family: Lato, sans-serif; cursor: pointer; } - .task__button:hover { color: #3a3a3a; } - /* Heading */ h3 { color: #333; - - - - - - - - Expand All - - @@ -70,6 +83,7 @@ h3 { - font-weight: 700; font-size: 15px; border-bottom: 2px solid #333; @@ -115,21 +82,9 @@ h3 { margin: 0; text-transform: uppercase; } - .task__input { margin: 0; font-size: 18px; - - - - - - - - Expand All - - @@ -82,6 +96,7 @@ h3 { - line-height: 18px; height: 21px; padding: 0 9px; @@ -139,41 +94,17 @@ h3 { font-family: Lato, sans-serif; color: #888; } - .task__input:focus { color: #333; } - - - - - - - - Expand All - - @@ -91,6 +106,7 @@ h3 { - /* New Task */ .task-section__title_new { display: block; margin: 0 0 20px; } - .task__input_new { width: 318px; } - - - - - - - - Expand All - - @@ -105,27 +121,32 @@ h3 { - /* Task list */ .task { overflow: hidden; @@ -183,46 +114,29 @@ h3 { justify-content: space-between; align-items: center; } - .task > * { vertical-align: middle; } - .task__checkbox { margin: 0 10px; } - .task__label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } - .task__input { width: 226px } - .task__delete-img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } - .task__delete-img:hover { transform: rotateZ(0); } - - - - - - - - Expand Down - - - /* Completed */ .task-list_completed .task__label { text-decoration: line-through From c4158e1e4afc1c0c5aa5e3850af54f5f4512bd9c Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:17:40 +1000 Subject: [PATCH 14/24] refactor(basic-3.6): add spaces after colon in properties --- style.css | 51 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/style.css b/style.css index b3a798ad1b..188a69a799 100644 --- a/style.css +++ b/style.css @@ -17,23 +17,22 @@ font-family: fantasy, cursive; } -@media (max-width:768px) { +@media (max-width: 768px) { .header { text-align: center; } } -.main { - + - - - Expand Down - + + Expand All + @@ -47,16 +47,16 @@ +.main { display: block; width: 500px; margin: 0 auto 0; @@ -50,17 +49,38 @@ .task__input_new { display: inline-block; } + ul { - margin:0; + margin: 0; padding: 0px; } + li { - list-style:none; + list-style: none; } + input,button{ - outline:none; + outline: none; } + .task__button { + + + + + + + + Expand Down + + + + + + Expand Up + + @@ -159,14 +159,14 @@ h3 { + background: none; border: 0px; color: #888; @@ -142,14 +162,17 @@ h3 { text-decoration: line-through color: #888; } + /* Edit Task */ .task__input { - display:none + display: none } + .task_edit-mode .task__input { - display:inline-block; - width:224px + display: inline-block; + width: 224px } + .task_edit-mode .task__label { - display:none; + display: none; } \ No newline at end of file From 3b478e9b377a9c605a9342b70143adfb12eb23e0 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:20:02 +1000 Subject: [PATCH 15/24] refactor(basic-3.7): add semicolon after properties --- style.css | 86 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 48 insertions(+), 38 deletions(-) diff --git a/style.css b/style.css index 188a69a799..9ad92627d9 100644 --- a/style.css +++ b/style.css @@ -16,22 +16,10 @@ .header__link { font-family: fantasy, cursive; } - @media (max-width: 768px) { .header { text-align: center; } } - - - - - - - - Expand All - - @@ -47,16 +47,16 @@ - .main { display: block; width: 500px; @@ -41,29 +29,10 @@ .task__input { width: 56%; display: inline-block; - flex-grow: 1 -} -.task_new { - display: flex; -} -.task__input_new { - display: inline-block; + flex-grow: 1; } -ul { - margin: 0; - padding: 0px; -} - -li { - list-style: none; -} - -input,button{ - outline: none; -} - -.task__button { +.task_new { @@ -79,8 +48,24 @@ input,button{ Expand Up - @@ -159,14 +159,14 @@ h3 { + @@ -138,7 +138,7 @@ h3 { + display: flex; +} +.task__input_new { + display: inline-block; +} +ul { + margin: 0; + padding: 0px; +} +li { + list-style: none; +} +input,button{ + outline: none; +} +.task__button { background: none; border: 0px; color: #888; @@ -146,10 +131,23 @@ h3 { font-size: 18px; width: 226px; } + .task__input { - width: 226px + width: 226px; } + .task__delete-img { + + + + + + + + Expand All + + @@ -153,18 +153,18 @@ h3 { + height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; @@ -157,22 +155,34 @@ h3 { .task__delete-img:hover { transform: rotateZ(0); } + /* Completed */ .task-list_completed .task__label { - text-decoration: line-through + text-decoration: line-through; color: #888; } /* Edit Task */ .task__input { - display: none + display: none; } .task_edit-mode .task__input { display: inline-block; - width: 224px + width: 224px; } .task_edit-mode .task__label { + + + + + + + + Expand Down + + + display: none; } \ No newline at end of file From e8c27c84e06fbca730b453209b6bb4aa353de5eb Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:28:41 +1000 Subject: [PATCH 16/24] refactor(basic-3.7): add semicolon after properties --- style.css | 166 ++++++++++++++++++++++++------------------------------ 1 file changed, 74 insertions(+), 92 deletions(-) diff --git a/style.css b/style.css index 9ad92627d9..01be44fc9d 100644 --- a/style.css +++ b/style.css @@ -4,27 +4,33 @@ color: #333; font-family: Lato, sans-serif; } + .header { width: 500px; margin: 0 auto; display: block; text-align: right; } + .header__img { width: 100%; } + .header__link { font-family: fantasy, cursive; } + @media (max-width: 768px) { .header { text-align: center; } } + .main { display: block; width: 500px; margin: 0 auto 0; } + .task__label, .task__input { width: 56%; @@ -33,103 +39,101 @@ } .task_new { - - - - - - - - Expand Down - - - - - - Expand Up - - @@ -138,7 +138,7 @@ h3 { - - display: flex; +display: flex; } + .task__input_new { - display: inline-block; +display: inline-block; } + ul { - margin: 0; - padding: 0px; +margin: 0; +padding: 0px; } + li { - list-style: none; +list-style: none; } + input,button{ - outline: none; +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 */ h3 { - 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 { - 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:focus { - color: #333; +color: #333; } + /* New Task */ .task-section__title_new { - display: block; - margin: 0 0 20px; +display: block; +margin: 0 0 20px; } + .task__input_new { - width: 318px; +width: 318px; } + /* Task list */ .task { - 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; } + .task > * { - vertical-align: middle; +vertical-align: middle; } + .task__checkbox { - margin: 0 10px; +margin: 0 10px; } + .task__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; } .task__input { @@ -137,52 +141,30 @@ h3 { } .task__delete-img { - - - - - - - - Expand All - - @@ -153,18 +153,18 @@ h3 { - height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } .task__delete-img:hover { - transform: rotateZ(0); +transform: rotateZ(0); } /* Completed */ .task-list_completed .task__label { - text-decoration: line-through; - color: #888; +text-decoration: line-through; +color: #888; } /* Edit Task */ .task__input { - display: none; +display: none; } .task_edit-mode .task__input { - display: inline-block; - width: 224px; +display: inline-block; +width: 224px; } .task_edit-mode .task__label { - - - - - - - - Expand Down - - - display: none; } \ No newline at end of file From af6bad97f011309588676da21f37a9123e50868e Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:31:23 +1000 Subject: [PATCH 17/24] refactor(basic-3.8): separate selectors and properties with line breaks --- style.css | 149 +++++++++++++++++++++++++----------------------------- 1 file changed, 69 insertions(+), 80 deletions(-) diff --git a/style.css b/style.css index 01be44fc9d..3168f83dcd 100644 --- a/style.css +++ b/style.css @@ -4,167 +4,156 @@ color: #333; font-family: Lato, sans-serif; } - .header { width: 500px; margin: 0 auto; display: block; text-align: right; } - .header__img { width: 100%; } - .header__link { font-family: fantasy, cursive; } @media (max-width: 768px) { - .header { text-align: center; + .header { + text-align: center; } } - + .main { display: block; width: 500px; margin: 0 auto 0; } - .task__label, .task__input { width: 56%; display: inline-block; flex-grow: 1; } - .task_new { -display: flex; + display: flex; } - .task__input_new { -display: inline-block; + display: inline-block; } - ul { -margin: 0; -padding: 0px; + margin: 0; + padding: 0px; } - li { -list-style: none; + list-style: none; } -input,button{ -outline: none; +input, +button { + outline: none; } + + + + + + + + Expand Down + + + .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 */ h3 { -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 { -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:focus { -color: #333; + color: #333; } - /* New Task */ .task-section__title_new { -display: block; -margin: 0 0 20px; + display: block; + margin: 0 0 20px; } - .task__input_new { -width: 318px; + width: 318px; } - /* Task list */ .task { -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; } - .task > * { -vertical-align: middle; + vertical-align: middle; } - .task__checkbox { -margin: 0 10px; + margin: 0 10px; } - .task__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; } - .task__input { width: 226px; } - .task__delete-img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } .task__delete-img:hover { -transform: rotateZ(0); + transform: rotateZ(0); } - /* Completed */ .task-list_completed .task__label { -text-decoration: line-through; -color: #888; + text-decoration: line-through; + color: #888; } - /* Edit Task */ .task__input { -display: none; + display: none; } - .task_edit-mode .task__input { -display: inline-block; -width: 224px; + display: inline-block; + width: 224px; } - .task_edit-mode .task__label { display: none; } \ No newline at end of file From efe27f43dfd4ddefade3e8890a257e085f2ca3a0 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:42:31 +1000 Subject: [PATCH 18/24] refactor(extended-2.1, basic-3.1, 3.2, 3.3, 3.4): rewrite classes by BEM in CSS, HTML, JS files --- app.js | 87 ++++++++++-------------------------------------------- index.html | 11 ------- 2 files changed, 16 insertions(+), 82 deletions(-) diff --git a/app.js b/app.js index ed12e603fa..3a5458c36b 100644 --- a/app.js +++ b/app.js @@ -1,9 +1,11 @@ //Document is the DOM can be accessed in the console with document.window. // Tree is from the top, html, body, p etc. + //Problem: User interaction does not provide the correct results. //Solution: Add interactivity so the user can manage daily tasks. //Break things down into smaller steps and take each step at a time. + // Event handling, user interaction is what starts the code execution. const newTaskInput = document.querySelector(".task__input_new"); //Add a new task. @@ -47,22 +49,14 @@ var createNewTaskElement=function(taskString){ //and appending. listItem.appendChild(checkBox); listItem.appendChild(label); - - - - - - - - Expand All - - @@ -63,31 +60,31 @@ var createNewTaskElement=function(taskString){ - 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: @@ -94,17 +88,6 @@ var editTask=function(){ if(containsClass){ //switch to .editmode - - - - - - - - Expand All - - @@ -99,8 +96,8 @@ var editTask=function(){ - //label becomes the inputs value. label.innerText=editInput.value; editBtn.innerText="Edit"; @@ -118,25 +101,18 @@ var editTask=function(){ }; - - - - - - - - Expand All - - @@ -122,7 +119,7 @@ var taskCompleted=function(){ - //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); + } + + //Mark task completed var taskCompleted=function(){ console.log("Complete Task..."); @@ -148,16 +124,7 @@ var taskCompleted=function(){ } - - - - - - Expand All - - @@ -132,9 +129,9 @@ var taskIncomplete=function(){ - var taskIncomplete=function(){ console.log("Incomplete Task..."); //Mark task as incomplete. @@ -169,24 +136,20 @@ var taskIncomplete=function(){ } - - - - - - Expand All - - @@ -156,9 +153,9 @@ addButton.addEventListener("click",ajaxRequest); - 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); + + var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ console.log("bind list item events"); //select ListItems children @@ -196,17 +159,6 @@ var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ //Bind editTask to edit button. - - - - - - - - Expand All - - @@ -169,21 +166,21 @@ var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ - editButton.onclick=editTask; //Bind deleteTask to delete button. deleteButton.onclick=deleteTask; @@ -233,16 +185,9 @@ for (var i=0; iCompleted - - - - - - - - Expand Down - - -
    From ccb2c5deedcc30b84d9882c442240876e90c152f Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:44:44 +1000 Subject: [PATCH 19/24] refactor(extended-2.1, basic-3.1, 3.2, 3.3, 3.4): rewrite classes by BEM in CSS, HTML, JS files --- style.css | 41 ++++++++++++++++++++++++++++------------- 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/style.css b/style.css index 3168f83dcd..dbddb6f924 100644 --- a/style.css +++ b/style.css @@ -4,15 +4,18 @@ color: #333; font-family: Lato, sans-serif; } + .header { width: 500px; margin: 0 auto; display: block; text-align: right; } + .header__img { width: 100%; } + .header__link { font-family: fantasy, cursive; } @@ -22,28 +25,33 @@ text-align: center; } } - + .main { display: block; width: 500px; margin: 0 auto 0; } + .task__label, .task__input { width: 56%; display: inline-block; flex-grow: 1; } + .task_new { display: flex; } + .task__input_new { display: inline-block; } + ul { margin: 0; padding: 0px; } + li { list-style: none; } @@ -53,17 +61,6 @@ button { outline: none; } - - - - - - - - Expand Down - - - .task__button { background: none; border: 0px; @@ -73,11 +70,13 @@ button { font-family: Lato, sans-serif; cursor: pointer; } + .task__button:hover { color: #3a3a3a; } + /* Heading */ -h3 { +.task-section__title { color: #333; font-weight: 700; font-size: 15px; @@ -86,6 +85,7 @@ h3 { margin: 0; text-transform: uppercase; } + .task__input { margin: 0; font-size: 18px; @@ -98,62 +98,77 @@ h3 { font-family: Lato, sans-serif; color: #888; } + .task__input:focus { color: #333; } + /* New Task */ .task-section__title_new { display: block; margin: 0 0 20px; } + .task__input_new { width: 318px; } + /* Task list */ .task { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; + display: flex; justify-content: space-between; align-items: center; } + .task > * { vertical-align: middle; } + .task__checkbox { margin: 0 10px; } + .task__label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } + .task__input { width: 226px; } + .task__delete-img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } + .task__delete-img:hover { transform: rotateZ(0); } + /* Completed */ .task-list_completed .task__label { text-decoration: line-through; color: #888; } + /* Edit Task */ .task__input { display: none; } + .task_edit-mode .task__input { display: inline-block; width: 224px; } + .task_edit-mode .task__label { display: none; } \ No newline at end of file From 5f744e29feffd68406a575a381b3cc162c29fb2b Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:46:00 +1000 Subject: [PATCH 20/24] refactor: change placement of some CSS blocks for better readability --- style.css | 144 ++++++++++++++++++++++++++---------------------------- 1 file changed, 68 insertions(+), 76 deletions(-) diff --git a/style.css b/style.css index dbddb6f924..3db3a867b9 100644 --- a/style.css +++ b/style.css @@ -5,6 +5,21 @@ font-family: Lato, sans-serif; } +ul { + margin: 0; + padding: 0px; +} + +li { + list-style: none; +} + +input, +button { + outline: none; +} + +/* Header */ .header { width: 500px; margin: 0 auto; @@ -26,56 +41,13 @@ } } +/* Main */ .main { display: block; width: 500px; margin: 0 auto 0; } -.task__label, -.task__input { - width: 56%; - display: inline-block; - flex-grow: 1; -} - -.task_new { - display: flex; -} - -.task__input_new { - display: inline-block; -} - -ul { - margin: 0; - padding: 0px; -} - -li { - list-style: none; -} - -input, -button { - outline: none; -} - -.task__button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; -} - -.task__button:hover { - color: #3a3a3a; -} - -/* Heading */ .task-section__title { color: #333; font-weight: 700; @@ -86,34 +58,7 @@ button { text-transform: uppercase; } -.task__input { - 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:focus { - color: #333; -} - -/* New Task */ -.task-section__title_new { - display: block; - margin: 0 0 20px; -} - -.task__input_new { - width: 318px; -} - -/* Task list */ +/* Task */ .task { overflow: hidden; padding: 20px 0; @@ -139,8 +84,44 @@ button { width: 226px; } +.task__label, +.task__input { + width: 56%; + display: inline-block; + flex-grow: 1; +} + .task__input { width: 226px; + margin: 0; + display: none; + 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:focus { + color: #333; +} + +.task__button { + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; +} + +.task__button:hover { + color: #3a3a3a; } .task__delete-img { @@ -153,6 +134,21 @@ button { transform: rotateZ(0); } +/* New Task */ +.task-section__title_new { + display: block; + margin: 0 0 20px; +} + +.task_new { + display: flex; +} + +.task__input_new { + width: 318px; + display: inline-block; +} + /* Completed */ .task-list_completed .task__label { text-decoration: line-through; @@ -160,10 +156,6 @@ button { } /* Edit Task */ -.task__input { - display: none; -} - .task_edit-mode .task__input { display: inline-block; width: 224px; From 912e1ea72a8b693f52a4c66170e2c43cb7050959 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:47:03 +1000 Subject: [PATCH 21/24] refactor: rewrite some functions to correspond ES5 --- app.js | 212 ++++++++++++++++++++------------------------------------- 1 file changed, 72 insertions(+), 140 deletions(-) diff --git a/app.js b/app.js index 3a5458c36b..14b1336a77 100644 --- a/app.js +++ b/app.js @@ -1,5 +1,5 @@ //Document is the DOM can be accessed in the console with document.window. -// Tree is from the top, html, body, p etc. +//Tree is from the top, html, body, p etc. //Problem: User interaction does not provide the correct results. //Solution: Add interactivity so the user can manage daily tasks. @@ -7,187 +7,119 @@ // Event handling, user interaction is what starts the code execution. - -const newTaskInput = document.querySelector(".task__input_new"); //Add a new task. +const newTaskInput = document.querySelector(".task__input_new"); //Add a new task input const addButton = document.querySelector(".task__button_add");//Button 'Add' -const todoList = document.querySelector(".task-list_todo");//ul of .task-list_todo -const completedTasksList = document.querySelector(".task-list_completed");//completed-tasks +const todoList = document.querySelector(".task-list_todo");//list todo-tasks +const completedTasksList = document.querySelector(".task-list_completed");//list completed-tasks +function createNewElementWithClass(el, elClasses) { + const element = document.createElement(el); + element.className = elClasses; + return element; +} //New task list item -var createNewTaskElement=function(taskString){ +const createNewTaskElement = function(taskString) { - const listItem = document.createElement("li"); - listItem.className = "task"; + const listItem = createNewElementWithClass("li", "task");//task - //input (checkbox) - var checkBox=document.createElement("input");//checkbox - checkBox.className = "task__checkbox"; + const checkBox = createNewElementWithClass("input", "task__checkbox");//checkbox checkBox.type="checkbox"; - //label - var label=document.createElement("label");//label - label.className='task__label'; - label.innerText=taskString; - //input (text) - var editInput=document.createElement("input");//text - editInput.className='task__input'; + const label = createNewElementWithClass("label", "task__label");//label + label.innerText = taskString; + const editInput = createNewElementWithClass("input", "task__input");//input editInput.type="text"; - //button.edit - var editButton=document.createElement("button");//edit button - editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="task__button task__button_edit"; - - //button.delete - var deleteButton=document.createElement("button");//delete button - var deleteButtonImg=document.createElement("img");//delete button image - deleteButton.className="task__button task__button_delete"; - deleteButtonImg.src="./remove.svg"; - deleteButtonImg.alt="delete Icon"; - deleteButtonImg.className="task__delete-img"; - deleteButton.appendChild(deleteButtonImg); - - //and appending. - listItem.appendChild(checkBox); - listItem.appendChild(label); - listItem.appendChild(editInput); - listItem.appendChild(editButton); - listItem.appendChild(deleteButton); + const editButton = createNewElementWithClass("button", "task__button task__button_edit");//edit button + editButton.innerText="Edit"; + const deleteButton = createNewElementWithClass("button", "task__button task__button_delete");//delete button + deleteButton.innerHTML = 'delete Icon'; + + listItem.append(checkBox, label, editInput, editButton,deleteButton); return listItem; } - - -var addTask=function(){ +const addTask = function() { console.log("Add Task..."); - //Create a new list item with the text from the #new-task: - if (!newTaskInput.value) return; - var listItem=createNewTaskElement(newTaskInput.value); - //Append listItem to todoList - todoList.appendChild(listItem); - bindTaskEvents(listItem, taskCompleted); - - newTaskInput.value=""; + //create and append listItem to todoList with the text from the .task-new + if (newTaskInput.value) { + const listItem = createNewTaskElement(newTaskInput.value); + todoList.appendChild(listItem); + bindTaskEvents(listItem); + newTaskInput.value=""; + } } //Edit an existing task. - -var editTask=function(){ +const editTask = function() { console.log("Edit Task..."); console.log("Change 'edit' to 'save'"); - - var listItem=this.parentNode; - - var editInput=listItem.querySelector('.task__input'); - var label=listItem.querySelector(".task__label"); - var editBtn=listItem.querySelector(".task__button_edit"); - var containsClass=listItem.classList.contains("task_edit-mode"); - //If class of the parent is .edit-mode - 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"; + const listItem = this.parentNode; + const editInput = listItem.querySelector('.task__input'); + const label = listItem.querySelector(".task__label"); + const editBtn = listItem.querySelector(".task__button_edit"); + const containsClass = listItem.classList.contains("task_edit-mode"); + + //change label and button depending on task_edit-mode + if (containsClass) { + label.innerText = editInput.value; + editBtn.innerText = "Edit"; + } else { + editInput.value = label.innerText; + editBtn.innerText = "Save"; } - //toggle .edit-mode on the parent. + //toggle .task_edit-mode on the parent. listItem.classList.toggle("task_edit-mode"); }; - //Delete task. -var deleteTask=function(){ +const 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); - -} - - -//Mark task completed -var taskCompleted=function(){ - console.log("Complete Task..."); - - //Append the task list item to the #completed-tasks - var listItem=this.parentNode; - completedTasksList.appendChild(listItem); - bindTaskEvents(listItem, taskIncomplete); - + const listItem = this.parentNode; + const list = listItem.parentNode; + list.removeChild(listItem); } - -var taskIncomplete=function(){ - console.log("Incomplete Task..."); - //Mark task as incomplete. - //When the checkbox is unchecked - //Append the task list item to the .task-list_todo. - var listItem=this.parentNode; - todoList.appendChild(listItem); - bindTaskEvents(listItem,taskCompleted); -} - - - -var ajaxRequest=function(){ - console.log("AJAX Request"); +function toggleCompleteTask(checkbox) { + const listItem = checkbox.parentNode; + if (checkbox.checked) { + completedTasksList.appendChild(listItem); + } else { + todoList.appendChild(listItem); + } } -//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.addEventListener("click", addTask); -var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ +const bindTaskEvents = function(taskListItem) { console.log("bind list item events"); - //select ListItems children - var checkBox=taskListItem.querySelector(".task__checkbox"); - var editButton=taskListItem.querySelector(".task__button_edit"); - var deleteButton=taskListItem.querySelector(".task__button_delete"); - - - //Bind editTask to edit button. - editButton.onclick=editTask; - //Bind deleteTask to delete button. - deleteButton.onclick=deleteTask; - //Bind taskCompleted to checkBoxEventHandler. - checkBox.onchange=checkBoxEventHandler; -} -//cycle over todoList ul list items -//for each list item -for (var i=0; i toggleCompleteTask(checkBox)); } - - - -//cycle over completedTasksList ul list items -for (var i=0; i Date: Tue, 9 Jan 2024 21:48:19 +1000 Subject: [PATCH 22/24] fix: add reqiared meta tags and attributes --- index.html | 122 ++++++++++++++++++++++++++--------------------------- 1 file changed, 61 insertions(+), 61 deletions(-) diff --git a/index.html b/index.html index fbf193cf9e..fe5a1fddcd 100644 --- a/index.html +++ b/index.html @@ -1,63 +1,63 @@ - - - Todo App - - - - -
    - - Eisenhower matrix image - Want more details? - -
    -
    -
    -

    Add Item

    -
    - - -
    -
    -
    -

    Todo

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

    Completed

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

    Add Item

    +
    + + +
    +
    +
    +

    Todo

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

    Completed

    +
      +
    • + + + + + +
      • +
    +
    +
    + + \ No newline at end of file From 1d9f9dc1c22f3564559b432165a994e4c157466f Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:50:27 +1000 Subject: [PATCH 23/24] fix: add h1 visually hidden heading --- index.html | 1 + style.css | 11 +++++++++++ 2 files changed, 12 insertions(+) diff --git a/index.html b/index.html index fe5a1fddcd..189b93bb09 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@
    +

    TODO app

    Eisenhower matrix image Want more details?
    diff --git a/style.css b/style.css index 3db3a867b9..d785773cfe 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,15 @@ /* Basic Style */ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + clip: rect(0 0 0 0); + overflow: hidden; +} + .page { background-color: #f8f8f8; color: #333; From 657d69c0b6068ad60eed8573e6e9c31da41525a4 Mon Sep 17 00:00:00 2001 From: Maxim Sushkov Date: Tue, 9 Jan 2024 21:52:00 +1000 Subject: [PATCH 24/24] refactor(extended-1.1): change h3 heading on h2 heading to correspond MDN --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 189b93bb09..7bcb74e42f 100644 --- a/index.html +++ b/index.html @@ -15,14 +15,14 @@

    TODO app

    -

    Add Item

    +

    Add Item

    -

    Todo

    +

    Todo

    • @@ -45,7 +45,7 @@

      Todo

    -

    Completed

    +

    Completed