refactor(extended-2.1): change classes using BEM methodology

ToryaToria · ToryaToria · commit 52dfead57ffa · 2025-10-23T12:46:15.000+03:00
diff --git a/app.js b/app.js
@@ -33,12 +33,12 @@ var createNewTaskElement=function(taskString){
     var deleteButtonImg=document.createElement("img");//delete button image
 
     label.innerText=taskString;
-    label.className='task';
+    label.className='tasks__field';
 
     //Each elements, needs appending
     checkBox.type="checkbox";
     editInput.type="text";
-    editInput.className="task";
+    editInput.className="tasks__field";
 
     editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
     editButton.className="edit";
diff --git a/index.html b/index.html
@@ -12,32 +12,34 @@
 </head>
 
 <body>
-  <header class="header"><img src="./eisenhower-matrix.jpg" alt="eisenhower matrix">
-    <a class="more-information" href="https://goal-life.com/page/method/matrix-eisenhower">
+  <header class="header">
+    <img class="header__img" src="./eisenhower-matrix.jpg" alt="eisenhower matrix">
+    <a class="header__more-information" href="https://goal-life.com/page/method/matrix-eisenhower">
       Want more details?
     </a>
   </header>
 
   <main>
-    <section>
-      <div class="centered-wrapper">
-        <h1 class="title">Todo</h1>
-        <div class="add-wrapper">
-          <h3>
-            <label for="new-task">Add Item</label>
-          </h3>
-          <div class="task-row-wrapper">
-            <input id="new-task" class="task" type="text">
+    <section class="tasks">
+      <div class="tasks__centered-wrapper">
+        <h1 class="tasks__main-title">Todo App</h1>
+
+        <div class="tasks__add-wrapper">
+          <h2>
+            <label class="tasks__title" for="new-task">Add Item</label>
+          </h2>
+          <div class="tasks__row-wrapper">
+            <input id="new-task" class="tasks__field" type="text">
             <button>Add</button>
           </div>
         </div>
 
-        <h2>Todo</h2>
+        <h2 class="tasks__title">Todo</h2>
         <ul id="incomplete-tasks">
           <li>
             <input type="checkbox">
-            <label class="task">Pay Bills</label>
-            <input type="text" class="task">
+            <label class="tasks__field">Pay Bills</label>
+            <input type="text" class="tasks__field">
             <button class="edit">Edit</button>
             <button class="delete">
               <img src="./remove.svg" alt="remove">
@@ -46,21 +48,22 @@ <h2>Todo</h2>
 
           <li class="edit-mode">
             <input type="checkbox">
-            <label class="task">Go Shopping</label>
-            <input type="text" value="Go Shopping" class="task">
+            <label class="tasks__field">Go Shopping</label>
+            <input type="text" value="Go Shopping" class="tasks__field">
             <button class="edit">Save</button>
             <button class="delete">
               <img src="./remove.svg" alt="remove">
             </button>
           </li>
 
         </ul>
-        <h2>Completed</h2>
+        <h2 class="tasks__title">Completed</h2>
         <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>
+            <label class="tasks__field">See the Doctor</label>
+            <input type="text" class="tasks__field">
+            <button class="edit">Edit</button>
             <button class="delete">
               <img src="./remove.svg" alt="remove">
             </button>
diff --git a/style.css b/style.css
@@ -5,12 +5,13 @@ body {
   font-family: Lato, sans-serif;
 }
 
-.title {
+.tasks__main-title {
+  font-size: 0;
 width: 0;  
 line-height: 0;
 }
 
-.add-wrapper {
+.tasks__add-wrapper {
   margin-top: 16px;
   margin-bottom: 16px;
 }
@@ -22,11 +23,11 @@ line-height: 0;
   text-align: right;
 }
 
-.header img {
+.header__img {
   width: 100%;
 }
 
-.header .more-information {
+.header__more-information {
   font-family: fantasy, cursive;
 }
 
@@ -36,19 +37,19 @@ line-height: 0;
   }
 }
 
-.centered-wrapper {
+.tasks__centered-wrapper {
   display: block;
   width: 500px;
   margin: 0 auto 0;
 }
 
-.task {
+.tasks__field {
   width: 56%;
   display: inline-block;
   flex-grow: 1;
 }
 
-.task-row-wrapper {
+.tasks__row-wrapper {
   display: flex;
 }
 
@@ -58,7 +59,7 @@ ul {
 }
 
 li,
-h2 {
+.tasks__title {
   list-style: none;
 }
 
@@ -82,8 +83,7 @@ button:hover {
 }
 
 /* Heading */
-h2,
-label[for="new-task"] {
+.tasks__title {
   color: #333;
   font-weight: 700;
   font-size: 15px;

Original file line number	Diff line number	Diff line change
`@@ -5,12 +5,13 @@ body {`
`5`	`5`	`font-family: Lato, sans-serif;`
`6`	`6`	`}`
`7`	`7`
`8`		`-.title {`
	`8`	`+.tasks__main-title {`
	`9`	`+ font-size: 0;`
`9`	`10`	`width: 0;`
`10`	`11`	`line-height: 0;`
`11`	`12`	`}`
`12`	`13`
`13`		`-.add-wrapper {`
	`14`	`+.tasks__add-wrapper {`
`14`	`15`	`margin-top: 16px;`
`15`	`16`	`margin-bottom: 16px;`
`16`	`17`	`}`
`@@ -22,11 +23,11 @@ line-height: 0;`
`22`	`23`	`text-align: right;`
`23`	`24`	`}`
`24`	`25`
`25`		`-.header img {`
	`26`	`+.header__img {`
`26`	`27`	`width: 100%;`
`27`	`28`	`}`
`28`	`29`
`29`		`-.header .more-information {`
	`30`	`+.header__more-information {`
`30`	`31`	`font-family: fantasy, cursive;`
`31`	`32`	`}`
`32`	`33`
`@@ -36,19 +37,19 @@ line-height: 0;`
`36`	`37`	`}`
`37`	`38`	`}`
`38`	`39`
`39`		`-.centered-wrapper {`
	`40`	`+.tasks__centered-wrapper {`
`40`	`41`	`display: block;`
`41`	`42`	`width: 500px;`
`42`	`43`	`margin: 0 auto 0;`
`43`	`44`	`}`
`44`	`45`
`45`		`-.task {`
	`46`	`+.tasks__field {`
`46`	`47`	`width: 56%;`
`47`	`48`	`display: inline-block;`
`48`	`49`	`flex-grow: 1;`
`49`	`50`	`}`
`50`	`51`
`51`		`-.task-row-wrapper {`
	`52`	`+.tasks__row-wrapper {`
`52`	`53`	`display: flex;`
`53`	`54`	`}`
`54`	`55`
`@@ -58,7 +59,7 @@ ul {`
`58`	`59`	`}`
`59`	`60`
`60`	`61`	`li,`
`61`		`-h2 {`
	`62`	`+.tasks__title {`
`62`	`63`	`list-style: none;`
`63`	`64`	`}`
`64`	`65`
`@@ -82,8 +83,7 @@ button:hover {`
`82`	`83`	`}`
`83`	`84`
`84`	`85`	`/* Heading */`
`85`		`-h2,`
`86`		`-label[for="new-task"] {`
	`86`	`+.tasks__title {`
`87`	`87`	`color: #333;`
`88`	`88`	`font-weight: 700;`
`89`	`89`	`font-size: 15px;`