From e5d257cd4a7d52fa9fd53b74a30b31b69911a754 Mon Sep 17 00:00:00 2001 From: Asilovvv Date: Tue, 17 Dec 2024 02:06:47 +0600 Subject: [PATCH 1/3] fixing: changes y faults --- app.js | 126 +++++++++++++++++----------------- index.html | 62 +++++++++++++++++ style.css | 198 +++++++++++++++++++++++++++++++++++------------------ 3 files changed, 257 insertions(+), 129 deletions(-) diff --git a/app.js b/app.js index ab737a6002..7dc2f197a6 100644 --- a/app.js +++ b/app.js @@ -8,43 +8,47 @@ // 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 taskInput = document.getElementById("new-task");//Add a new task. +const addButton = document.getElementsByTagName("button")[0];//first button +const incompleteTaskHolder = document.getElementById("incompleteTasks");//ul of #incompleteTasks +const completedTasksHolder = document.getElementById("completedTasks");//completed-tasks //New task list item -var createNewTaskElement=function(taskString){ +const createNewTaskElement = function(taskString){ - var listItem=document.createElement("li"); + const listItem = document.createElement("li"); //input (checkbox) - var checkBox=document.createElement("input");//checkbx + const checkBox = document.createElement("input");//checkbx //label - var label=document.createElement("label");//label + const label = document.createElement("label");//label //input (text) - var editInput=document.createElement("input");//text + const editInput = document.createElement("input");//text //button.edit - var editButton=document.createElement("button");//edit button + const editButton = document.createElement("button");//edit button //button.delete - var deleteButton=document.createElement("button");//delete button - var deleteButtonImg=document.createElement("img");//delete button image + const deleteButton = document.createElement("button");//delete button + const deleteButtonImg = document.createElement("img");//delete button image - label.innerText=taskString; - label.className='task'; + listItem.className='task'; + + label.innerText = taskString; + label.className = 'task__title'; //Each elements, needs appending - checkBox.type="checkbox"; - editInput.type="text"; - editInput.className="task"; + checkBox.type = "checkbox"; + checkBox.className = 'task__check'; + editInput.type = "text"; + editInput.className = "task__input"; - editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + editButton.innerText = "Edit"; //innerText encodes special characters, HTML does not. + editButton.className = "btn btn-edit"; - deleteButton.className="delete"; - deleteButtonImg.src='./remove.svg'; + deleteButton.className = "btn btn-delete"; + deleteButtonImg.className = 'btn-delete__img'; + deleteButtonImg.src = './remove.svg'; deleteButton.appendChild(deleteButtonImg); @@ -59,56 +63,56 @@ 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); + const listItem = createNewTaskElement(taskInput.value); //Append listItem to incompleteTaskHolder incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem, taskCompleted); - taskInput.value=""; + 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 + const editInput = listItem.querySelector('.task__input'); + const label = listItem.querySelector(".task__title"); + const editBtn = listItem.querySelector(".btn-edit"); + const containsClass = listItem.classList.contains(".task_edit-mode"); + //If class of the parent is .edit-mode if(containsClass){ - //switch to .editmode + //switch to .edit-mode //label becomes the inputs value. - label.innerText=editInput.value; - editBtn.innerText="Edit"; + 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"); + //toggle .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; + const listItem = this.parentNode; + const ul = listItem.parentNode; //Remove the parent list item from the ul. ul.removeChild(listItem); @@ -116,30 +120,30 @@ var deleteTask=function(){ //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); + bindTaskEvents(listItem, taskCompleted); } -var ajaxRequest=function(){ +const ajaxRequest = function(){ console.log("AJAX Request"); } @@ -147,42 +151,42 @@ var ajaxRequest=function(){ //Set the click handler to the addTask function. -addButton.onclick=addTask; -addButton.addEventListener("click",addTask); -addButton.addEventListener("click",ajaxRequest); +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(".task__check"); + const editButton = taskListItem.querySelector(".btn-edit"); + const deleteButton = taskListItem.querySelector(".btn-delete"); //Bind editTask to edit button. - editButton.onclick=editTask; + editButton.onclick = editTask; //Bind deleteTask to delete button. - deleteButton.onclick=deleteTask; + deleteButton.onclick = deleteTask; //Bind taskCompleted to checkBoxEventHandler. - checkBox.onchange=checkBoxEventHandler; + checkBox.onchange = checkBoxEventHandler; } //cycle over incompleteTaskHolder ul list items //for each list item -for (var i=0; i Todo App @@ -15,5 +16,66 @@ +======= + + + + Todo App + + + + +
+ Eisenhower Matrix + Want more details? +
+
+

+ +

+ + +
+

+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+ +>>>>>>> Stashed changes \ No newline at end of file diff --git a/style.css b/style.css index ab36227705..77e499c832 100644 --- a/style.css +++ b/style.css @@ -1,50 +1,71 @@ /* Basic Style */ + body { background-color: #f8f8f8; color: #333; font-family: Lato, sans-serif; -} -.aaa { + } + + ul { + margin: 0; + padding: 0; + } + + li { + list-style: none; + } + + input, + button { + outline: none; + } + + /* Header */ + + .header { width: 500px; margin: 0 auto; display: block; text-align: right; -} -.aaa img { + } + + .header__img { width: 100%; -} -.aaa .more_inf { + } + + .header__link-info { font-family: fantasy, cursive; -} - -@media (max-width:768px) { -.aaa { text-align: center; -} -} -.centered-main-page-element { + } + + @media (max-width: 768px) { + .header { + text-align: center; + } + } + + /* Main */ + + .main { display: block; width: 500px; margin: 0 auto 0; -} -.task { + } + + .section-add { + margin: 1rem 0; + } + + .task__title { width: 56%; display: inline-block; - flex-grow: 1 -} -.task-row-wrapper { + flex-grow: 1; + } + + .section-add__row-wrapper { display: flex; -} -ul { - margin:0; - padding: 0px; -} -li, h3 { - list-style:none; -} -input,button{ - outline:none; -} -button { + } + + .btn { background: none; border: 0px; color: #888; @@ -52,13 +73,16 @@ button { width: 60px; font-family: Lato, sans-serif; cursor: pointer; -} -button:hover { - color: #3a3A3a; -} -/* Heading */ -h3, -label[for='new-task'] { + } + + .btn:hover { + color: #3a3a3a; + } + + /* Heading */ + + .section-title, + .section-add__title { color: #333; font-weight: 700; font-size: 15px; @@ -66,65 +90,77 @@ label[for='new-task'] { padding: 30px 0 10px; 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: 1px solid #ddd; + background: #fff; border-radius: 6px; font-family: Lato, sans-serif; color: #888; -} -input[type="text"]:focus { + } + + .task__input:focus { color: #333; -} - -/* New Task */ -label[for='new-task'] { + } + + /* New Task */ + + .section-add__title { display: block; margin: 0 0 20px; -} -input#new-task { + } + + .task__input.section-add__input { width: 318px; -} - -/* Task list */ -li { + } + + /* Task list */ + + .task { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; - + display: flex; justify-content: space-between; align-items: center; -} -li > * { + } + + .task > * { vertical-align: middle; -} - -li > input[type="checkbox"] { + } + + .task__check { margin: 0 10px; -} -li > label { + } + + .task__title { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; -} -li > input[type="text"] { - width: 226px -} -button.delete img { + } + + .task__input { + width: 226px; + flex-grow: 1; + } + + .btn-delete__img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; -} -button.delete img:hover { + } + + .btn-delete__img:hover { transform: rotateZ(0); +<<<<<<< Updated upstream } /* Completed */ @@ -145,4 +181,30 @@ ul li.editMode input[type=text] { ul li.editMode label { display:none; +======= + } + + /* Completed */ + + .list_comleted .task__title { + text-decoration: line-through; + color: #888; + } + + /* Edit Task */ + .task .task__input { + display: none; + } + + .task.task_edit-mode .task__input { + display: inline-block; + width: 224px; + } + + .task.task_edit-mode .task__title { + display: none; + } + .section-add { + margin: 1rem 0; +>>>>>>> Stashed changes } \ No newline at end of file From 2ed67e4c83810c16f73feda3ceb035620770ea71 Mon Sep 17 00:00:00 2001 From: Asilovvv Date: Tue, 17 Dec 2024 02:08:09 +0600 Subject: [PATCH 2/3] fixing: changes y faults --- index.html | 20 -------------------- style.css | 23 ----------------------- 2 files changed, 43 deletions(-) diff --git a/index.html b/index.html index 22041517eb..0947bc1789 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,3 @@ -<<<<<<< Updated upstream - -Todo App - - - - -
Want more details?
-

-

Todo

-
    -
    • -
    • -

Completed

  • -
    • -
-
- -======= @@ -76,6 +57,5 @@

Completed

->>>>>>> Stashed changes \ No newline at end of file diff --git a/style.css b/style.css index 77e499c832..34fbd5ad3d 100644 --- a/style.css +++ b/style.css @@ -160,28 +160,6 @@ body { .btn-delete__img:hover { transform: rotateZ(0); -<<<<<<< Updated upstream -} - -/* 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; -======= } /* Completed */ @@ -206,5 +184,4 @@ ul li.editMode label { } .section-add { margin: 1rem 0; ->>>>>>> Stashed changes } \ No newline at end of file From 9c80f58405b0486a5c3bf7ca484ac4c769024191 Mon Sep 17 00:00:00 2001 From: Asilovvv Date: Tue, 17 Dec 2024 02:12:40 +0600 Subject: [PATCH 3/3] fixing: fix --- .vscode/settings.json | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..f673a71b7a --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file