From 49038894a35d684ac60319b72c7d43f966034e7d Mon Sep 17 00:00:00 2001 From: zxcavn Date: Mon, 16 Dec 2024 18:56:52 +0300 Subject: [PATCH 1/7] refactor: add DOCTYPE and sort html tags --- index.html | 72 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 56 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60c..b75b1b414e 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,59 @@ - -Todo App - - - + + + + + + + + Todo App + -
Want more details?
-

-

Todo

-

Completed

-
+
+ + Want more details? +
+
+

+ +

+ + +
+

+

Todo

+ +

Completed

+ +
- \ No newline at end of file + + From f87cfe1463eca18d3c8dda6dc9b696ef9f3983d4 Mon Sep 17 00:00:00 2001 From: zxcavn Date: Mon, 16 Dec 2024 19:03:02 +0300 Subject: [PATCH 2/7] refactor: change on "" --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index b75b1b414e..0577b6ab8d 100644 --- a/index.html +++ b/index.html @@ -10,20 +10,20 @@
- Want more details? + Want more details and quest;
-

+

- +

Todo

-
    +
    • - + @@ -35,7 +35,7 @@

      Todo

      - +
      • From 84881a3c950dfaa9bf9ded2e0d92c38785860ce9 Mon Sep 17 00:00:00 2001 From: zxcavn Date: Mon, 16 Dec 2024 19:08:24 +0300 Subject: [PATCH 3/7] refactor: add ; , sort class, minus display --- style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index ab36227705..b3b36dfb9f 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,6 @@ body { .aaa { width: 500px; margin: 0 auto; - display: block; text-align: right; } .aaa img { @@ -18,8 +17,9 @@ body { } @media (max-width:768px) { -.aaa { text-align: center; -} + .aaa { + text-align: center; + } } .centered-main-page-element { display: block; @@ -129,7 +129,7 @@ button.delete img:hover { /* Completed */ ul#completed-tasks label { - text-decoration: line-through + text-decoration: line-through; color: #888; } From 1647323453ce48df552bcc825e3251ebbc7d92a6 Mon Sep 17 00:00:00 2001 From: zxcavn Date: Mon, 16 Dec 2024 19:11:01 +0300 Subject: [PATCH 4/7] refactor: finish style --- style.css | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index b3b36dfb9f..246f99f9c0 100644 --- a/style.css +++ b/style.css @@ -4,14 +4,17 @@ body { color: #333; font-family: Lato, sans-serif; } + .aaa { width: 500px; margin: 0 auto; text-align: right; } + .aaa img { width: 100%; } + .aaa .more_inf { font-family: fantasy, cursive; } @@ -21,29 +24,36 @@ body { 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 } + .task-row-wrapper { display: flex; } + ul { margin:0; - padding: 0px; + padding: 0; } + li, h3 { list-style:none; } + input,button{ outline:none; } + button { background: none; border: 0px; @@ -53,6 +63,7 @@ button { font-family: Lato, sans-serif; cursor: pointer; } + button:hover { color: #3a3A3a; } @@ -67,6 +78,7 @@ label[for='new-task'] { margin: 0; text-transform: uppercase; } + input[type="text"] { margin: 0; font-size: 18px; @@ -79,6 +91,7 @@ input[type="text"] { font-family: Lato, sans-serif; color: #888; } + input[type="text"]:focus { color: #333; } @@ -97,11 +110,11 @@ li { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; - display: flex; justify-content: space-between; align-items: center; } + li > * { vertical-align: middle; } @@ -109,20 +122,24 @@ 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 } + button.delete img { - height: 2em; + height: 32px; transform: rotateZ(45deg); transition: transform 200ms ease-in; } + button.delete img:hover { transform: rotateZ(0); } From b7021d905844af3881c43a3481ce3a4413a80e45 Mon Sep 17 00:00:00 2001 From: zxcavn Date: Mon, 16 Dec 2024 19:17:24 +0300 Subject: [PATCH 5/7] refactor: delete comment in js --- app.js | 165 +++++++++++++++++---------------------------------------- 1 file changed, 50 insertions(+), 115 deletions(-) diff --git a/app.js b/app.js index ab737a6002..0a99f5b364 100644 --- a/app.js +++ b/app.js @@ -1,54 +1,31 @@ -//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 - - 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'; +const taskInput = document.getElementById("new-task"); +const addButton = document.getElementsByTagName("button")[0]; +const incompleteTaskHolder = document.getElementById("incompleteTasks"); +const completedTasksHolder = document.getElementById("completed-tasks"); + + + +const createNewTaskElement = (taskString) => { + const listItem = document.createElement("li"); + const checkBox = document.createElement("input"); + const label = document.createElement("label"); + const editInput = document.createElement("input"); + const editButton = document.createElement("button"); + const deleteButton=document.createElement("button"); + const deleteButtonImg=document.createElement("img"); + + label.innerText = taskString; + label.className = "task"; + + checkBox.type = "checkbox"; + editInput.type = "text"; + editInput.className = "task"; + editButton.innerText = "Edit"; + editButton.className = "edit"; + deleteButton.className = "delete"; + deleteButtonImg.src = "./remove.svg"; deleteButton.appendChild(deleteButtonImg); - - //and appending. listItem.appendChild(checkBox); listItem.appendChild(label); listItem.appendChild(editInput); @@ -59,38 +36,31 @@ var createNewTaskElement=function(taskString){ -var addTask=function(){ +const 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 + const listItem=createNewTaskElement(taskInput.value); incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted); - taskInput.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; + const 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){ + const editInput=listItem.querySelector('input[type=text]'); + const label=listItem.querySelector("label"); + const editBtn=listItem.querySelector(".edit"); + const containsClass=listItem.classList.contains("editMode"); - //switch to .editmode - //label becomes the inputs value. + if(containsClass){ label.innerText=editInput.value; editBtn.innerText="Edit"; }else{ @@ -98,98 +68,63 @@ var editTask=function(){ editBtn.innerText="Save"; } - //toggle .editmode on the parent. listItem.classList.toggle("editMode"); }; //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. + const listItem=this.parentNode; + const ul=listItem.parentNode; ul.removeChild(listItem); } - -//Mark task completed -var taskCompleted=function(){ +const taskCompleted=function(){ console.log("Complete Task..."); - - //Append the task list item to the #completed-tasks - var listItem=this.parentNode; + const listItem=this.parentNode; completedTasksHolder.appendChild(listItem); bindTaskEvents(listItem, taskIncomplete); } -var taskIncomplete=function(){ +const 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; + const listItem=this.parentNode; incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem,taskCompleted); } -var ajaxRequest=function(){ +const 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){ +const 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"); + const checkBox=taskListItem.querySelector("input[type=checkbox]"); + const editButton=taskListItem.querySelector("button.edit"); + const 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 Date: Mon, 16 Dec 2024 19:18:19 +0300 Subject: [PATCH 6/7] refactor:delete label --- app.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/app.js b/app.js index 0a99f5b364..6ff7b2f13f 100644 --- a/app.js +++ b/app.js @@ -14,9 +14,6 @@ const createNewTaskElement = (taskString) => { const deleteButton=document.createElement("button"); const deleteButtonImg=document.createElement("img"); - label.innerText = taskString; - label.className = "task"; - checkBox.type = "checkbox"; editInput.type = "text"; editInput.className = "task"; From 02c9f3085f40c61d68a5fc51ac8e8fccf937c0c3 Mon Sep 17 00:00:00 2001 From: zxcavn Date: Mon, 16 Dec 2024 19:22:00 +0300 Subject: [PATCH 7/7] refactor: finish js --- app.js | 92 ++++++++++++++++++++++++++-------------------------------- 1 file changed, 41 insertions(+), 51 deletions(-) diff --git a/app.js b/app.js index 6ff7b2f13f..746231f747 100644 --- a/app.js +++ b/app.js @@ -11,8 +11,8 @@ const createNewTaskElement = (taskString) => { const label = document.createElement("label"); const editInput = document.createElement("input"); const editButton = document.createElement("button"); - const deleteButton=document.createElement("button"); - const deleteButtonImg=document.createElement("img"); + const deleteButton = document.createElement("button"); + const deleteButtonImg = document.createElement("img"); checkBox.type = "checkbox"; editInput.type = "text"; @@ -31,11 +31,10 @@ const createNewTaskElement = (taskString) => { return listItem; } - - -const addTask=function(){ +const addTask = () => { console.log("Add Task..."); if (!taskInput.value) return; + const listItem=createNewTaskElement(taskInput.value); incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted); @@ -43,61 +42,52 @@ const addTask=function(){ } - - -const editTask=function(){ - console.log("Edit Task..."); - console.log("Change 'edit' to 'save'"); - - - const listItem=this.parentNode; - - const editInput=listItem.querySelector('input[type=text]'); - const label=listItem.querySelector("label"); - const editBtn=listItem.querySelector(".edit"); - const containsClass=listItem.classList.contains("editMode"); - - if(containsClass){ - label.innerText=editInput.value; - editBtn.innerText="Edit"; - }else{ - editInput.value=label.innerText; - editBtn.innerText="Save"; - } - - listItem.classList.toggle("editMode"); -}; - - -//Delete task. -const deleteTask=function(){ - console.log("Delete Task..."); - const listItem=this.parentNode; - const ul=listItem.parentNode; - ul.removeChild(listItem); - +const editTask = () => { + console.log("Edit Task...") + console.log("Change 'edit' to 'save'") + const listItem = this.parentNode + const editInput = listItem.querySelector("input[type=text]") + const label = listItem.querySelector("label") + const editBtn = listItem.querySelector(".edit") + const containsClass = listItem.classList.contains("editMode") + + if (containsClass) { + label.innerText = editInput.value + editBtn.innerText = "Edit" + } else { + editInput.value = label.innerText + editBtn.innerText = "Save" + } + + listItem.classList.toggle('editMode') } -const taskCompleted=function(){ - console.log("Complete Task..."); - const listItem=this.parentNode; - completedTasksHolder.appendChild(listItem); - bindTaskEvents(listItem, taskIncomplete); +const deleteTask = () => { + console.log("Delete Task...") + const listItem = this.parentNode + const ul = listItem.parentNode + ul.removeChild(listItem) +} +const taskCompleted = () => { + console.log("Complete Task...") + const listItem = this.parentNode + completedTasksHolder.appendChild(listItem) + bindTaskEvents(listItem, taskIncomplete) } -const taskIncomplete=function(){ - console.log("Incomplete Task..."); - const listItem=this.parentNode; - incompleteTaskHolder.appendChild(listItem); - bindTaskEvents(listItem,taskCompleted); +const taskIncomplete = () => { + console.log("Incomplete Task...") + const listItem = this.parentNode + incompleteTaskHolder.appendChild(listItem) + bindTaskEvents(listItem, taskCompleted) } -const ajaxRequest=function(){ - console.log("AJAX Request"); +const ajaxRequest = () => { + console.log("AJAX Request") } addButton.onclick=addTask; @@ -105,7 +95,7 @@ addButton.addEventListener("click",addTask); addButton.addEventListener("click",ajaxRequest); -const bindTaskEvents=function(taskListItem,checkBoxEventHandler){ +const bindTaskEvents = function(taskListItem,checkBoxEventHandler) { console.log("bind list item events"); const checkBox=taskListItem.querySelector("input[type=checkbox]");