rolling-scopes-school · EvgenyAlexievich · Oct 19, 2025 · Oct 19, 2025 · Oct 19, 2025 · Oct 19, 2025
diff --git 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 #incompleteTasks
 var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
 
 
@@ -33,27 +33,30 @@ var createNewTaskElement=function(taskString){
     var deleteButtonImg=document.createElement("img");//delete button image
 
     label.innerText=taskString;
-    label.className='task';
+    label.className='todo-app__label--task todo-app__label';
 
     //Each elements, needs appending
     checkBox.type="checkbox";
+    checkBox.className="todo-app__input todo-app__input--checkbox"
     editInput.type="text";
-    editInput.className="task";
+    editInput.className="todo-app__input todo-app__input--text";
 
     editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
-    editButton.className="edit";
+    editButton.className="edit todo-app__button";
 
-    deleteButton.className="delete";
+    deleteButton.className="delete todo-app__button";
     deleteButtonImg.src='./remove.svg';
+    deleteButtonImg.className="todo-app__icon";
     deleteButton.appendChild(deleteButtonImg);
 
-
+    
     //and appending.
     listItem.appendChild(checkBox);
     listItem.appendChild(label);
     listItem.appendChild(editInput);
     listItem.appendChild(editButton);
     listItem.appendChild(deleteButton);
+    listItem.className="todo-app__item";
     return listItem;
 }
 
@@ -82,10 +85,10 @@ var editTask=function(){
 
     var listItem=this.parentNode;
 
-    var editInput=listItem.querySelector('input[type=text]');
+    var editInput=listItem.querySelector('.todo-app__input--text');
     var label=listItem.querySelector("label");
     var editBtn=listItem.querySelector(".edit");
-    var containsClass=listItem.classList.contains("editMode");
+    var containsClass=listItem.classList.contains("edit-mode");
     //If class of the parent is .editmode
     if(containsClass){
 
@@ -99,7 +102,7 @@ var editTask=function(){
     }
 
     //toggle .editmode on the parent.
-    listItem.classList.toggle("editMode");
+    listItem.classList.toggle("edit-mode");
 };
 
 
@@ -155,7 +158,7 @@ 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 checkBox=taskListItem.querySelector(".todo-app__input--checkbox");
     var editButton=taskListItem.querySelector("button.edit");
     var deleteButton=taskListItem.querySelector("button.delete");
 

diff --git a/index.html b/index.html
@@ -1,19 +1,71 @@
+<!DOCTYPE html>
 <html>
-<HEAD><title>Todo App</title>
-<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
-<link rel="stylesheet" href="style.css" type="text/css" MEDIA="screen" charset="utf-8">
-</HEAD>
-<body>
-<div class="aaa"><img src="./eisenhower-matrix.jpg"><a class='more_inf' href="https://goal-life.com/page/method/matrix-eisenhower">Want more details&quest;</a></div>
-<div class="centered-main-page-element"><p id='topSectionForAddingElementToList'><label for="new-task">Add Item</label><div class="task-row-wrapper"><input id='new-task'class="task" type="text"><button>Add</button></div>
-</p><h3>Todo</h3>
-<ul id='incompleteTasks'>
-<li><input type='checkbox'><label class="task">Pay Bills</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button></li>
-<li class="editMode"><input type="checkbox"><label class="task">Go Shopping</label><input type="text" value="Go Shopping" class="task"><button class='edit'>Save</button><button class="delete"><img src="./remove.svg"></button></li>
-</ul><h3>Completed</h3><ul id="completed-tasks"><li><input type="checkbox" checked><label class="task">See the Doctor</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button>
-</li>
-</ul>
-</div>
-<script type="text/javascript" SRC="app.js"></script>
+<head>
+  <title>Todo App</title>
+  <link
+    href="https://fonts.googleapis.com/css?family=Lato:300,400,700"
+    rel="stylesheet"
+  >
+  <link
+    rel="stylesheet"
+    href="style.css"
+    media="screen"
+    charset="utf-8"
+  >
+</head>
+<body class="page">
+  <section class="eisenhower-matrix">
+    <h1 class="eisenhower-matrix__h1">Eisenhower-matrix</h1>
+    <img class="eisenhower-matrix__img" src="./eisenhower-matrix.jpg" alt="eisenhower-matrix">
+    <a
+      class="eisenhower-matrix__link"
+      href="https://goal-life.com/page/method/matrix-eisenhower"
+      >
+      Want more details?
+    </a>
+  </section>
+  <section class="todo-app">
+    <div class="todo-app__add-task" id="add-task">
+      <label class="todo-app__label todo-app__label--new" for="new-task">Add Item</label>
+      <div class="todo-app__wrapper">
+        <input id="new-task" class="todo-app__input todo-app__input--text" type="text">
+        <button class="todo-app__button">Add</button>
+      </div>
+    </div>
+    <h3 class="todo-app__title">Todo</h3>
+    <ul class="todo-app__list edit-task" id="incomplete-tasks">
+      <li class="todo-app__item">
+        <input type="checkbox" class="todo-app__input todo-app__input--checkbox">
+        <label class="todo-app__label todo-app__label--task">Pay Bills</label>
+        <input type="text" class="todo-app__input todo-app__input--text">
+        <button class="edit todo-app__button">Edit</button>
+        <button class="delete todo-app__button">
+          <img class="todo-app__icon" src="./remove.svg" alt="remove-icon">
+        </button>
+      </li>
+      <li class="edit-mode todo-app__item">
+        <input type="checkbox" class="todo-app__input todo-app__input--checkbox">
+        <label class="todo-app__label todo-app__label--task">Go Shopping</label>
+        <input type="text" value="Go Shopping" class="todo-app__input todo-app__input--text">
+        <button class="edit todo-app__button">Save</button>
+        <button class="delete todo-app__button">
+          <img class="todo-app__icon" src="./remove.svg" alt="remove-icon">
+        </button>
+      </li>
+    </ul>
+    <h3 class="todo-app__title">Completed</h3>
+    <ul class="todo-app__list complete-task" id="completed-tasks">
+      <li class="todo-app__item">
+        <input type="checkbox" class="todo-app__input todo-app__input--checkbox" checked>
+        <label class="todo-app__label todo-app__label--task">See the Doctor</label>
+        <input type="text" class="todo-app__input todo-app__input--text">
+        <button class="edit todo-app__button">Edit</button>
+        <button class="delete todo-app__button">
+          <img class="todo-app__icon" src="./remove.svg" alt="remove-icon">
+        </button>
+      </li>
+    </ul>
+  </section>
+  <script src="app.js"></script>
 </body>
 </html>