From 226ba3921fd8c589a44e926d8368f8bfe1f22335 Mon Sep 17 00:00:00 2001 From: Ivan Gorokhov Date: Mon, 24 Apr 2023 23:05:26 +0300 Subject: [PATCH 01/21] refactor(basic-1.1): HTML-refactor and CSS-refactor --- index.html | 34 ++++++------ style.css | 148 ++++++++++++++++++++++++++--------------------------- 2 files changed, 91 insertions(+), 91 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60ca..e931482bbe4 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,19 @@ -Todo App - - - - -
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 ab36227705e..7bd4fea6a94 100644 --- a/style.css +++ b/style.css @@ -3,48 +3,48 @@ body { background-color: #f8f8f8; color: #333; font-family: Lato, sans-serif; -} -.aaa { + } + .aaa { width: 500px; margin: 0 auto; display: block; text-align: right; -} -.aaa img { + } + .aaa img { width: 100%; -} -.aaa .more_inf { + } + .aaa .more_inf { font-family: fantasy, cursive; -} - -@media (max-width:768px) { -.aaa { text-align: center; -} -} -.centered-main-page-element { + } + + @media (max-width:768px) { + .aaa { text-align: center; + } + } + .centered-main-page-element { display: block; width: 500px; margin: 0 auto 0; -} -.task { + } + .task { width: 56%; display: inline-block; flex-grow: 1 -} -.task-row-wrapper { + } + .task-row-wrapper { display: flex; -} -ul { + } + ul { margin:0; padding: 0px; -} -li, h3 { + } + li, h3 { list-style:none; -} -input,button{ + } + input,button{ outline:none; -} -button { + } + button { background: none; border: 0px; color: #888; @@ -52,13 +52,13 @@ button { width: 60px; font-family: Lato, sans-serif; cursor: pointer; -} -button:hover { + } + button:hover { color: #3a3A3a; -} -/* Heading */ -h3, -label[for='new-task'] { + } + /* Heading */ + h3, + label[for='new-task'] { color: #333; font-weight: 700; font-size: 15px; @@ -66,8 +66,8 @@ label[for='new-task'] { padding: 30px 0 10px; margin: 0; text-transform: uppercase; -} -input[type="text"] { + } + input[type="text"] { margin: 0; font-size: 18px; line-height: 18px; @@ -78,71 +78,71 @@ input[type="text"] { border-radius: 6px; font-family: Lato, sans-serif; color: #888; -} -input[type="text"]:focus { + } + input[type="text"]:focus { color: #333; -} - -/* New Task */ -label[for='new-task'] { + } + + /* New Task */ + label[for='new-task'] { display: block; margin: 0 0 20px; -} -input#new-task { + } + input#new-task { width: 318px; -} - -/* Task list */ -li { + } + + /* Task list */ + li { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; - + display: flex; justify-content: space-between; align-items: center; -} -li > * { + } + 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"] { + } + li > input[type="text"] { width: 226px -} -button.delete img { + } + 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 { + } + + /* Completed */ + ul#completed-tasks label { text-decoration: line-through color: #888; -} - -/* Edit Task */ -ul li input[type=text] { + } + + /* Edit Task */ + ul li input[type=text] { display:none -} - -ul li.editMode input[type=text] { + } + + ul li.editMode input[type=text] { display:inline-block; width:224px -} - -ul li.editMode label { + } + + ul li.editMode label { display:none; -} \ No newline at end of file + } \ No newline at end of file From 21d31826ef6f91a56f3aa37486ca3f862dce6508 Mon Sep 17 00:00:00 2001 From: Ivan Gorokhov Date: Mon, 24 Apr 2023 23:14:21 +0300 Subject: [PATCH 02/21] refactor(basic-1.2): changed elements to lower case in HTML, CSS --- index.html | 8 ++++---- style.css | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index e931482bbe4..54f00251f4e 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ - Todo App + Todo App - - + +
Want more details?

@@ -14,6 +14,6 @@
- + \ No newline at end of file diff --git a/style.css b/style.css index 7bd4fea6a94..a8971497b5f 100644 --- a/style.css +++ b/style.css @@ -54,7 +54,7 @@ body { cursor: pointer; } button:hover { - color: #3a3A3a; + color: #3a3a3a; } /* Heading */ h3, @@ -73,8 +73,8 @@ body { line-height: 18px; height: 21px; padding: 0 9px; - border: 1px solid #dDd; - background: #FFF; + border: 1px solid #ddd; + background: #fff; border-radius: 6px; font-family: Lato, sans-serif; color: #888; From 4e5caffebcbc3384ad37dab4fa63c48d7c7d801f Mon Sep 17 00:00:00 2001 From: Ivan Gorokhov Date: Mon, 24 Apr 2023 23:23:02 +0300 Subject: [PATCH 03/21] refactor(basic-1.3): changed single quots to double quots in HTML and CSS --- index.html | 12 ++++++------ style.css | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 54f00251f4e..a84adad77fb 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,15 @@ Todo App - + -
Want more details?
-

+
Want more details?
+

Todo

-
    -
    • -
    • +
      +
      • +

    Completed

    diff --git a/style.css b/style.css index a8971497b5f..10d739566a9 100644 --- a/style.css +++ b/style.css @@ -58,7 +58,7 @@ body { } /* Heading */ h3, - label[for='new-task'] { + label[for="new-task"] { color: #333; font-weight: 700; font-size: 15px; @@ -84,7 +84,7 @@ body { } /* New Task */ - label[for='new-task'] { + label[for="new-task"] { display: block; margin: 0 0 20px; } From 08beda9e9522d67a7cb35d65e5784db1ec92cc94 Mon Sep 17 00:00:00 2001 From: Ivan Gorokhov Date: Mon, 24 Apr 2023 23:27:43 +0300 Subject: [PATCH 04/21] refactor(basic-2.1): refactored HTML --- index.html | 53 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index a84adad77fb..736a53f2a62 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,54 @@ - Todo App + + Todo App -
    Want more details?
    -

    -

    Todo

    +
    + + Want more details? +
    +
    +

    + +

    + + +
    +

    +

    Todo

      -
      • -
      • -

    Completed

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

    Completed

    +
      +
    • + + + + + +
    From 8116865aabf2bdf4b678ede86104a32e237916b9 Mon Sep 17 00:00:00 2001 From: Ivan Gorokhov Date: Mon, 24 Apr 2023 23:31:22 +0300 Subject: [PATCH 05/21] fix(basic-2.2): added HTML5 DOCTYPE tag --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 736a53f2a62..448acb9ee1c 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + Todo App From 8cafcc3c19956186b936eabb7f2a4425d32495ff Mon Sep 17 00:00:00 2001 From: Ivan Gorokhov Date: Mon, 24 Apr 2023 23:33:32 +0300 Subject: [PATCH 06/21] refactor(basic-2.3): removed mnemonic in HTML --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 448acb9ee1c..7b2bc79d9de 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
    - Want more details? + Want more details?

    From d635c9d2f959b827f5cbb70272cece7b825768e0 Mon Sep 17 00:00:00 2001 From: Ivan Gorokhov Date: Mon, 24 Apr 2023 23:35:28 +0300 Subject: [PATCH 07/21] fix(basic-2.4): removed type-atribute in HTML --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 7b2bc79d9de..a8e40c6342b 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 c3dc5f15c81a23afc4ce2675b7ccbbe7e4b39462 Mon Sep 17 00:00:00 2001 From: Ivan Gorokhov Date: Mon, 24 Apr 2023 23:39:36 +0300 Subject: [PATCH 08/21] fix(basic-3.1): renamed classes and id's in HTML, CSS, JS --- app.js | 280 ++++++++++++++++++++++++----------------------------- index.html | 8 +- style.css | 6 +- 3 files changed, 134 insertions(+), 160 deletions(-) diff --git a/app.js b/app.js index ab737a60027..c1c92778d40 100644 --- a/app.js +++ b/app.js @@ -5,191 +5,165 @@ //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 - +var taskInput = document.getElementById("new-task"); //Add a new task. +var addButton = document.getElementsByTagName("button")[0]; //first button +var incompleteTaskHolder = document.getElementById("incompleted-tasks"); //ul of #incompleted-tasks +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 - - 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); +var createNewTaskElement = function (taskString) { + var listItem = document.createElement("li"); + + //input (checkbox) + var checkBox = document.createElement("input"); //checkbx + //label + var label = document.createElement("label"); //label + //input (text) + var editInput = document.createElement("input"); //text + //button.edit + var editButton = document.createElement("button"); //edit button + + //button.delete + var deleteButton = document.createElement("button"); //delete button + var deleteButtonImg = document.createElement("img"); //delete button image + + label.innerText = taskString; + label.className = "task"; + + //Each elements, needs appending + checkBox.type = "checkbox"; + editInput.type = "text"; + editInput.className = "task"; + + editButton.innerText = "Edit"; //innerText encodes special characters, HTML does not. + editButton.className = "edit"; + + deleteButton.className = "delete"; + deleteButtonImg.src = "./remove.svg"; + deleteButton.appendChild(deleteButtonImg); + + //and appending. + listItem.appendChild(checkBox); + listItem.appendChild(label); + listItem.appendChild(editInput); + listItem.appendChild(editButton); + listItem.appendChild(deleteButton); + return listItem; +}; - //Append listItem to incompleteTaskHolder - incompleteTaskHolder.appendChild(listItem); - bindTaskEvents(listItem, taskCompleted); +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); - 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"); +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("edit-mode"); + //If class of the parent is .edit-mode + if (containsClass) { + //switch to .edit-mode + //label becomes the inputs value. + label.innerText = editInput.value; + editBtn.innerText = "Edit"; + } else { + editInput.value = label.innerText; + editBtn.innerText = "Save"; + } + + //toggle .edit-mode on the parent. + listItem.classList.toggle("edit-mode"); }; - //Delete task. -var deleteTask=function(){ - console.log("Delete Task..."); - - var listItem=this.parentNode; - var ul=listItem.parentNode; - //Remove the parent list item from the ul. - ul.removeChild(listItem); - -} +var 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 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 #incompleted-tasks. + var listItem = this.parentNode; + incompleteTaskHolder.appendChild(listItem); + bindTaskEvents(listItem, taskCompleted); +}; -var ajaxRequest=function(){ - console.log("AJAX Request"); -} +var ajaxRequest = function () { + console.log("AJAX Request"); +}; //The glue to hold it all together. - //Set the click handler to the addTask function. -addButton.onclick=addTask; -addButton.addEventListener("click",addTask); -addButton.addEventListener("click",ajaxRequest); - - -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; -} +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"); + + //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
- Want more details? + Want more details?
-

+

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

Todo

-