From fe7df90c90e9511de7ddd4eccc654906256236eb Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Sat, 6 Jan 2024 22:20:51 +0200 Subject: [PATCH 01/10] fix(basic-1.2, basic-2.1, basic-2.2): HEAD tag to lowercase, add Html5 DOCTYPE tag, every block, table or list element on a new line --- index.html | 69 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 52 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index ef4aa1f..9be7a1e 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,54 @@ - -Todo App - - - - -
Want more details?
-

-

Todo

-

Completed

+ + + + + + Todo App + + + + +
+ + Want more details? +
+
+

+ +

+ + +
+

+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
- - \ No newline at end of file + + + From 7f259b344f936a6895000ff8d5bec9390a100dea Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Sun, 7 Jan 2024 14:19:09 +0200 Subject: [PATCH 02/10] fix(basic-3.1,3.2,advanced-1.1):BEM for header class naming, meanimgful class names for header, semantic tag header added --- index.html | 8 ++++---- style.css | 9 +++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 9be7a1e..a807a58 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,10 @@ -
- - Want more details? -
+
+ Eisenhower matrix image + Want more details? +

diff --git a/style.css b/style.css index ab36227..5e301e0 100644 --- a/style.css +++ b/style.css @@ -4,21 +4,22 @@ body { 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_more-info { font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { text-align: center; +.header { + text-align: center; } } .centered-main-page-element { From 98f684a7a8dda441a2be25fae274fb5fc804691a Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Mon, 8 Jan 2024 22:10:41 +0200 Subject: [PATCH 03/10] fix(basic-3.1,3.2):BEM class naming, meanimgful class names changed --- app.js | 280 ++++++++++++++++++++++++----------------------------- index.html | 122 ++++++++++++++--------- style.css | 223 +++++++++++++++++++++++------------------- 3 files changed, 327 insertions(+), 298 deletions(-) diff --git a/app.js b/app.js index ab737a6..1f0c3c2 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("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'; - 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_item-input"; + + 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 .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("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 #incompleteTasks. + 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 - - + + Todo App - - + +

- Eisenhower matrix image - Want more details? + Eisenhower matrix image + Want more details? +

Todo list App

-
-

- -

- - -
-

-

Todo

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

Completed

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

Add Item

+
+ + +
+
+
+

Todo

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

Completed

+
    +
  • + + + + + +
    • +
+
+
+ - diff --git a/style.css b/style.css index 5e301e0..289a02d 100644 --- a/style.css +++ b/style.css @@ -1,149 +1,170 @@ /* Basic Style */ body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; +} +ul { + margin: 0; + padding: 0px; +} +li { + list-style: none; } .header { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; + width: 500px; + margin: 0 auto; + display: block; + text-align: right; } + +input, +button { + outline: none; +} + .header_img { - width: 100%; + width: 100%; } + .header_more-info { - font-family: fantasy, cursive; + font-family: fantasy, cursive; } -@media (max-width:768px) { -.header { +@media (max-width: 768px) { + .header { text-align: center; + } } + +.visually-hidden { + display: none; } -.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; + +.main_wrapper { + display: block; + width: 500px; + margin: 0 auto 0; } -li, h3 { - list-style:none; + +.task_section-input { + width: 56%; + display: inline-block; + flex-grow: 1; } -input,button{ - outline:none; + +.task_section-wrapper { + display: flex; } -button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; + +.task_btn { + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; } -button:hover { - color: #3a3A3a; + +.task_btn: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; +.task_section-title { + 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; +.add_section-title { + display: block; + margin: 0 0 20px; } -input#new-task { - width: 318px; + +.input_new-task { + width: 318px; } /* Task list */ -li { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; +.task_item { + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } -li > * { - vertical-align: middle; + +.task_item > * { + vertical-align: middle; } -li > input[type="checkbox"] { - margin: 0 10px; +.task_item-checkbox { + margin: 0 10px; } -li > label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; + +.task_item-label { + padding-left: 10px; + box-sizing: border-box; + font-size: 18px; + width: 226px; } -li > input[type="text"] { - width: 226px + +.task_item > input[type="text"] { + width: 226px; } -button.delete img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; + +.task_btn-delete img { + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; } -button.delete img:hover { - transform: rotateZ(0); + +.task_btn-delete img:hover { + transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { - text-decoration: line-through - color: #888; +.completed_label { + text-decoration: line-through; + color: #888; } /* Edit Task */ -ul li input[type=text] { - display:none +.task_item input[type="text"] { + display: none; } -ul li.editMode input[type=text] { - display:inline-block; - width:224px +.edit-mode input[type="text"] { + display: inline-block; + width: 224px; } -ul li.editMode label { - display:none; -} \ No newline at end of file +.edit-mode label { + display: none; +} From b3036439b8fa0f15e3d8b7a2dd6cbf63ff983fb4 Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Mon, 8 Jan 2024 22:47:45 +0200 Subject: [PATCH 04/10] fix(basic-3.1): use hyphen to separate id name, change name of selectors in app.js --- app.js | 16 +++++++++------- index.html | 6 +++--- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/app.js b/app.js index 1f0c3c2..7bcd5bd 100644 --- a/app.js +++ b/app.js @@ -9,12 +9,13 @@ 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("incompleted-tasks"); //ul of #incompleteTasks var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks //New task list item var createNewTaskElement = function (taskString) { var listItem = document.createElement("li"); + listItem.className = "task_item"; //input (checkbox) var checkBox = document.createElement("input"); //checkbx @@ -30,17 +31,18 @@ var createNewTaskElement = function (taskString) { var deleteButtonImg = document.createElement("img"); //delete button image label.innerText = taskString; - label.className = "task"; + label.className = "task_item-label"; //Each elements, needs appending checkBox.type = "checkbox"; + checkBox.className = "task_item-checkbox"; editInput.type = "text"; editInput.className = "task_item-input"; editButton.innerText = "Edit"; //innerText encodes special characters, HTML does not. - editButton.className = "edit"; + editButton.className = "task_btn task_btn-edit"; - deleteButton.className = "delete"; + deleteButton.className = "task_btn task_btn-delete"; deleteButtonImg.src = "./remove.svg"; deleteButton.appendChild(deleteButtonImg); @@ -76,7 +78,7 @@ var editTask = function () { var editInput = listItem.querySelector("input[type=text]"); var label = listItem.querySelector("label"); - var editBtn = listItem.querySelector(".edit"); + var editBtn = listItem.querySelector(".task_btn-edit"); var containsClass = listItem.classList.contains("edit-mode"); //If class of the parent is .editmode if (containsClass) { @@ -138,8 +140,8 @@ 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 editButton = taskListItem.querySelector(".task_btn-edit"); + var deleteButton = taskListItem.querySelector(".task_btn-delete"); //Bind editTask to edit button. editButton.onclick = editTask; diff --git a/index.html b/index.html index 8fda8fc..6dba6b4 100644 --- a/index.html +++ b/index.html @@ -45,17 +45,17 @@

Add Item

Todo

-
    +
    • - +
      • -
    • +
    • From 2e1eb497e767222bb9e7b5fa26343f82860d7491 Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Mon, 8 Jan 2024 22:54:09 +0200 Subject: [PATCH 05/10] fix(basic-2.4): remove type attribute when connecting styles and scripts --- index.html | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 6dba6b4..60290eb 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,8 @@ - +
      @@ -83,6 +76,6 @@

      Completed

- + From 538f6a10db93844674b416be3e91964b32f38e9e Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Mon, 8 Jan 2024 23:01:22 +0200 Subject: [PATCH 06/10] fix(basic-2.3): change named character references to UTF-8 character --- index.html | 2 +- style.css | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 60290eb..4879d4b 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ Want more details?Want more details?

Todo list App

diff --git a/style.css b/style.css index 289a02d..dcbffbc 100644 --- a/style.css +++ b/style.css @@ -4,13 +4,21 @@ body { color: #333; font-family: Lato, sans-serif; } + ul { margin: 0; padding: 0px; } + li { list-style: none; } + +input, +button { + outline: none; +} + .header { width: 500px; margin: 0 auto; @@ -18,11 +26,6 @@ li { text-align: right; } -input, -button { - outline: none; -} - .header_img { width: 100%; } @@ -150,7 +153,7 @@ input[type="text"]:focus { } /* Completed */ -.completed_label { +#completed-tasks label { text-decoration: line-through; color: #888; } From 1f8c8d398b1e8844f3306d342baeb551e13924a6 Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Mon, 8 Jan 2024 23:14:44 +0200 Subject: [PATCH 07/10] fix(advanced-1.1): correct h3 to h2 according to title hierarchy --- index.html | 6 +++--- style.css | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 4879d4b..c743f27 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@

Todo list App

-

Add Item

+

Add Item

Add Item
-

Todo

+

Todo

  • @@ -60,7 +60,7 @@

    Todo

-

Completed

+

Completed

  • diff --git a/style.css b/style.css index dcbffbc..e71c03a 100644 --- a/style.css +++ b/style.css @@ -19,6 +19,10 @@ button { outline: none; } +.visually-hidden { + display: none; +} + .header { width: 500px; margin: 0 auto; @@ -40,10 +44,6 @@ button { } } -.visually-hidden { - display: none; -} - .main_wrapper { display: block; width: 500px; From aadb6b3b2058547045f19a23106663dcee21b9aa Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Tue, 9 Jan 2024 00:05:35 +0200 Subject: [PATCH 08/10] fix(advanced-1.2): add alt for img, corrected selectors in css file" --- index.html | 10 ++++------ style.css | 17 ++++++++--------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index c743f27..a9f446f 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@

    Todo list App

    Add Item

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

    Todo

  • @@ -63,10 +63,8 @@

    Todo

    Completed

    • - - + +
    • @@ -54,7 +58,11 @@

      Todo

    @@ -65,10 +73,14 @@

    Completed

  • - +
diff --git a/style.css b/style.css index 87bf902..8e3f99c 100644 --- a/style.css +++ b/style.css @@ -141,13 +141,13 @@ button { width: 226px; } -.task_btn-delete img { +.task_btn-delete .task_delete-img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -.task_btn-delete img:hover { +.task_btn-delete .task_delete-img:hover { transform: rotateZ(0); } @@ -158,15 +158,15 @@ button { } /* Edit Task */ -.task_item input[type="text"] { +.task_item .task_item-input { display: none; } -.edit-mode input[type="text"] { +.edit-mode .task_item-input { display: inline-block; width: 224px; } -.edit-mode label { +.edit-mode .task_item-label { display: none; }