Optimized code

javascript-practice/src/js/views/commonView.js

@@ -34,10 +34,10 @@ export default class CommonView {
   initElementToast() {
     this.toastDialog = document.querySelector('.dialog');
     this.toast = document.querySelector('.toast');
-    this.toastIcon = document.querySelector('.mark');
-    this.toastBtn = document.querySelector('.toast__redirect-btn');
-    this.toastTitle = document.querySelector('.toast__title');
-    this.toastContent = document.querySelector('.toast__message');
+    this.toastIcon = this.toast.querySelector('.mark');
+    this.toastBtn = this.toast.querySelector('.toast__redirect-btn');
+    this.toastTitle = this.toast.querySelector('.toast__title');
+    this.toastContent = this.toast.querySelector('.toast__message');
   }
 
   /**
@@ -56,18 +56,14 @@ export default class CommonView {
    */
   initToastContent(typeToast, title, content, btnContent) {
     // Remove old typeToast class if haved
-    this.toast.classList.forEach((classItem) =>
-      classItem === TYPE_TOAST.success || classItem === TYPE_TOAST.error
-        ? this.toast.classList.remove(classItem)
-        : '',
-    );
+    Object.keys(TYPE_TOAST).forEach((value) => {
+      CommonView.removeClassElement(value, this.toast);
+    });
 
     // Remove old icon toast if haved
-    this.toastIcon.classList.forEach((classItem) =>
-      classItem === MARK_ICON.success || classItem === MARK_ICON.error
-        ? this.toastIcon.classList.remove(classItem)
-        : '',
-    );
+    Object.keys(MARK_ICON).forEach((value) => {
+      CommonView.removeClassElement(value, this.toastIcon);
+    });
 
     // Init content toast
     this.toast.classList.add(
@@ -81,6 +77,12 @@ export default class CommonView {
     this.toastBtn.textContent = btnContent;
   }
 
+  static removeClassElement(classEl, el) {
+    if (el.classList.contains(classEl)) {
+      el.classList.remove(classEl);
+    }
+  }
+
   /**
    * Add event listener for toast
    */

javascript-practice/src/js/views/homeView.js

@@ -23,13 +23,17 @@ export default class HomeView extends CommonView {
    */
   handlerTabsTransfer() {
     this.tabs.forEach((tab, index) => {
-      tab.addEventListener('click', (e) => {
+      tab.addEventListener('click', () => {
         this.removeActiveTab();
         tab.classList.add('active');
 
         const line = document.querySelector('.app__line');
-        line.style.width = `${e.target.offsetWidth}px`;
-        line.style.left = `${e.target.offsetLeft}px`;
+
+        if (line.classList.contains('left')) {
+          HomeView.replaceClassElement('left', 'right', line);
+        } else {
+          HomeView.replaceClassElement('right', 'left', line);
+        }
 
         this.allContent.forEach((content) => {
           content.classList.remove('active');
@@ -39,6 +43,11 @@ export default class HomeView extends CommonView {
     });
   }
 
+  static replaceClassElement(oldEl, newEl, el) {
+    el.classList.remove(oldEl);
+    el.classList.add(newEl);
+  }
+
   addCommonEventPage() {
     // Add event close dialog when click outside
     this.dialogs.forEach((dialog) => {

javascript-practice/src/pages/index.html

@@ -299,7 +299,7 @@
             <div class="app__tabs">
               <button class="app__tab-item active">SUMMARY</button>
               <button class="app__tab-item">TRANSACTION DETAILS</button>
-              <div class="app__line"></div>
+              <div class="app__line left"></div>
             </div>
             <!-- Start content app -->
             <div class="app__contents">

javascript-practice/src/styles/pages/_index.scss

@@ -109,12 +109,20 @@
     &__line {
       position: absolute;
       top: 66px;
-      left: 150px;
-      width: 115px;
       height: 2px;
       background-color: $primary-color;
       border-radius: 10px;
       transition: all 0.3s ease-in-out;
+
+      &.left {
+        left: 152px;
+        width: 116px;
+      }
+
+      &.right {
+        left: 272px;
+        width: 200px;
+      }
     }
   }