From ab13dacde16ff19ae7f2e8b23f1ab303ed4a1d94 Mon Sep 17 00:00:00 2001 From: EvzenPetrov Date: Mon, 16 Dec 2024 10:22:32 +0100 Subject: [PATCH 1/5] =?UTF-8?q?style:=20correction=20tags,=20=D1=81orrecti?= =?UTF-8?q?ng=20indents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 69 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 54 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60c..c75b23eed7 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,58 @@ -Todo App - - - + + Todo App + + + -
Want more details?
-

-

Todo

-

Completed

-
- +
+ + Want more details? +
+
+

+ +

+ + +

+
+
+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+ \ No newline at end of file From dc464eaa8db49d9376febc7b9c0341b6f5c32d8b Mon Sep 17 00:00:00 2001 From: EvzenPetrov Date: Mon, 16 Dec 2024 10:30:56 +0100 Subject: [PATCH 2/5] style: delete type attributes --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index c75b23eed7..13a88c57ae 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,8 @@ Todo App - - + +
@@ -53,6 +53,6 @@

Completed

- + \ No newline at end of file From bdb6265c004405eb986a29f5cb96fda211aa09a3 Mon Sep 17 00:00:00 2001 From: EvzenPetrov Date: Mon, 16 Dec 2024 10:45:54 +0100 Subject: [PATCH 3/5] style: correcting indents, add ";" --- style.css | 175 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 97 insertions(+), 78 deletions(-) diff --git a/style.css b/style.css index ab36227705..54eee17f3c 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,167 @@ /* Basic Style */ body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; } + .aaa { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; + width: 500px; + margin: 0 auto; + display: block; + text-align: right; } + .aaa img { - width: 100%; + width: 100%; } + .aaa .more_inf { - font-family: fantasy, cursive; + font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { text-align: center; -} + .aaa { + text-align: center; + } } + .centered-main-page-element { - display: block; - width: 500px; - margin: 0 auto 0; + display: block; + width: 500px; + margin: 0 auto 0; } + .task { - width: 56%; - display: inline-block; - flex-grow: 1 + width: 56%; + display: inline-block; + flex-grow: 1 } + .task-row-wrapper { - display: flex; + display: flex; } + ul { - margin:0; - padding: 0px; + margin: 0; + padding: 0px; } + li, h3 { - list-style:none; + list-style: none; } -input,button{ - outline:none; + +input,button { + outline: none; } + button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; } + button:hover { - color: #3a3A3a; + color: #3a3A3a; } + /* Heading */ -h3, -label[for='new-task'] { - color: #333; - font-weight: 700; - font-size: 15px; - border-bottom: 2px solid #333; - padding: 30px 0 10px; - margin: 0; - text-transform: uppercase; +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; + margin: 0; + font-size: 18px; + line-height: 18px; + height: 21px; + padding: 0 9px; + border: 1px solid #dDd; + background: #FFF; + border-radius: 6px; + font-family: Lato, sans-serif; + color: #888; } + input[type="text"]:focus { - color: #333; + color: #333; } /* New Task */ label[for='new-task'] { - display: block; - margin: 0 0 20px; + display: block; + margin: 0 0 20px; } + input#new-task { - width: 318px; + width: 318px; } /* Task list */ li { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; - - display: flex; - justify-content: space-between; - align-items: center; + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; + display: flex; + justify-content: space-between; + align-items: center; } + li > * { - vertical-align: middle; + vertical-align: middle; } li > input[type="checkbox"] { - margin: 0 10px; + margin: 0 10px; } + li > label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; + padding-left: 10px; + box-sizing: border-box; + font-size: 18px; + width: 226px; } + li > input[type="text"] { - width: 226px + width: 226px; } + button.delete img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; } + button.delete img:hover { - transform: rotateZ(0); + transform: rotateZ(0); } /* Completed */ ul#completed-tasks label { - text-decoration: line-through - color: #888; + text-decoration: line-through; + color: #888; } /* Edit Task */ ul li input[type=text] { - display:none + display: none; } ul li.editMode input[type=text] { - display:inline-block; - width:224px + display: inline-block; + width: 224px; } ul li.editMode label { - display:none; + display: none; } \ No newline at end of file From 2252b00b986e90f15dad0333396675bb014f1cbb Mon Sep 17 00:00:00 2001 From: EvzenPetrov Date: Mon, 16 Dec 2024 10:52:32 +0100 Subject: [PATCH 4/5] style: change "'" for """ --- index.html | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 13a88c57ae..d9f6168cf6 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,27 @@ + Todo App - +
- Want more details? + Want more details?
-

+

- +

Todo

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

      Todo

      - + From fe1fdc53ddbca214abd0a940e5e799336ccde8fe Mon Sep 17 00:00:00 2001 From: EvzenPetrov Date: Mon, 16 Dec 2024 11:49:41 +0100 Subject: [PATCH 5/5] style: change classes and ids names --- app.js | 14 +++++++------- index.html | 25 +++++++++++++------------ style.css | 23 +++++++++++++---------- 3 files changed, 33 insertions(+), 29 deletions(-) diff --git a/app.js b/app.js index ab737a6002..5326db2a16 100644 --- a/app.js +++ b/app.js @@ -10,7 +10,7 @@ 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 incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks @@ -85,11 +85,11 @@ var editTask=function(){ 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 containsClass=listItem.classList.contains("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"; @@ -98,8 +98,8 @@ var editTask=function(){ editBtn.innerText="Save"; } - //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + //toggle .edit-mode on the parent. + listItem.classList.toggle("edit-mode"); }; @@ -131,7 +131,7 @@ 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 #incomplete-tasks. var listItem=this.parentNode; incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem,taskCompleted); diff --git a/index.html b/index.html index d9f6168cf6..35a373fe53 100644 --- a/index.html +++ b/index.html @@ -6,36 +6,37 @@ -
      - - Want more details? +
      + matrix + Want more details?
      -

      +

      - +

      Todo

      -
        -
      • +
          +
        • +
          • -
        • +
        @@ -49,11 +50,11 @@

        Completed

      - + \ No newline at end of file diff --git a/style.css b/style.css index 54eee17f3c..d8895c75cc 100644 --- a/style.css +++ b/style.css @@ -5,23 +5,23 @@ body { font-family: Lato, sans-serif; } -.aaa { +.matrix { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa img { +.matrix img { width: 100%; } -.aaa .more_inf { +.matrix .more-inf { font-family: fantasy, cursive; } @media (max-width:768px) { - .aaa { + .matrix { text-align: center; } } @@ -47,11 +47,13 @@ ul { padding: 0px; } -li, h3 { +li, +h3 { list-style: none; } -input,button { +input, +button { outline: none; } @@ -70,7 +72,8 @@ button:hover { } /* Heading */ -h3, label[for='new-task'] { +h3, +label[for='new-task'] { color: #333; font-weight: 700; font-size: 15px; @@ -132,7 +135,7 @@ li > label { width: 226px; } -li > input[type="text"] { +li > input[type="text"] { width: 226px; } @@ -157,11 +160,11 @@ ul li input[type=text] { display: none; } -ul li.editMode input[type=text] { +ul li.edit-mode input[type=text] { display: inline-block; width: 224px; } -ul li.editMode label { +ul li.edit-mode label { display: none; } \ No newline at end of file