fix(basic-3.4): change tag selectors to class selectors

LesiaUKR · Jan 10, 2024 · b85c7b1 · b85c7b1
1 parent 7ff4249
commit b85c7b1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/app.js b/app.js
@@ -44,6 +44,7 @@ var createNewTaskElement = function (taskString) {
 
   deleteButton.className = "task_btn task_btn-delete";
   deleteButtonImg.src = "./remove.svg";
+  deleteButtonImg.className = "task_delete-img";
   deleteButton.appendChild(deleteButtonImg);
 
   //and appending.

diff --git a/index.html b/index.html
@@ -45,7 +45,11 @@ <h2 class="task_section-title">Todo</h2>
             <input class="task_item-input" type="text" />
             <button class="task_btn task_btn-edit">Edit</button>
             <button class="task_btn task_btn-delete">
-              <img src="./remove.svg" alt="Delete button" />
+              <img
+                class="task_delete-img"
+                src="./remove.svg"
+                alt="Delete button"
+              />
             </button>
           </li>
           <li class="task_item edit-mode">
@@ -54,7 +58,11 @@ <h2 class="task_section-title">Todo</h2>
             <input class="task_item-input" type="text" value="Go Shopping" />
             <button class="task_btn task_btn-edit">Save</button>
             <button class="task_btn task_btn-delete">
-              <img src="./remove.svg" alt="Delete button" />
+              <img
+                class="task_delete-img"
+                src="./remove.svg"
+                alt="Delete button"
+              />
             </button>
           </li>
         </ul>
@@ -65,10 +73,14 @@ <h2 class="task_section-title">Completed</h2>
           <li class="task_item">
             <input class="task_item-checkbox" type="checkbox" checked />
             <label class="task_item-label">See the Doctor</label>
-            <input type="text" class="task" />
+            <input class="task_item-input" type="text" />
             <button class="task_btn task_btn-edit">Edit</button>
             <button class="task_btn task_btn-delete">
-              <img src="./remove.svg" alt="Delete button" />
+              <img
+                class="task_delete-img"
+                src="./remove.svg"
+                alt="Delete button"
+              />
             </button>
           </li>
         </ul>

diff --git 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;
 }