Merge branch 'feat/refactor-html-scss' into feat/refactor-constant-controller

javascript-practice/src/pages/index.html

@@ -405,91 +405,6 @@
       </main>
       <!-- End app -->
     </div>
-    <!-- All scripts below is use for test purpose!  -->
     <script type="module" src="../js/main.js"></script>
-    <!-- <script>
-      // Handle event when click on tabs
-      const tabs = document.querySelectorAll('.app__tab-item');
-      const all_content = document.querySelectorAll('.app__content-item');
-
-      tabs.forEach((tab, index) => {
-        tab.addEventListener('click', (e) => {
-          tabs.forEach((tab) => {
-            tab.classList.remove('active');
-          });
-          tab.classList.add('active');
-
-          const line = document.querySelector('.app__line');
-          line.style.width = e.target.offsetWidth + 'px';
-          line.style.left = e.target.offsetLeft + 'px';
-
-          all_content.forEach((content) => {
-            content.classList.remove('active');
-          });
-          all_content[index].classList.add('active');
-        });
-      });
-
-      // Add event
-      const addTransactionBtn = document.getElementById('addTransaction');
-      const addBudgetBtn = document.getElementById('addBudget');
-      const overlay = document.querySelector('.overlay');
-      const darkOverlay = document.querySelector('.dark-overlay');
-      const dialog = document.querySelectorAll('.dialog');
-      const cancelBtn = document.querySelectorAll('.form__cancel-btn');
-      const categoryField = document.getElementById('selectCategory');
-      const closeIcon = document.querySelector('.close-icon');
-
-      const budgetForm = document.getElementById('budgetForm');
-      const transactionForm = document.getElementById('transactionForm');
-      const categoryForm = document.getElementById('categoryForm');
-
-      overlay.addEventListener('click', () => {
-        overlay.classList.toggle('active');
-
-        dialog.forEach((item) => {
-          if (item.classList.contains('active')) {
-            item.classList.remove('active');
-          }
-        });
-      });
-
-      addTransactionBtn.addEventListener('click', () => {
-        transactionForm.classList.toggle('active');
-        overlay.classList.toggle('active');
-      });
-
-      addBudgetBtn.addEventListener('click', () => {
-        budgetForm.classList.toggle('active');
-        overlay.classList.toggle('active');
-      });
-
-      cancelBtn.forEach((item) => {
-        item.addEventListener('click', () => {
-          overlay.classList.toggle('active');
-
-          dialog.forEach((item) => {
-            if (item.classList.contains('active')) {
-              item.classList.remove('active');
-            }
-          });
-        });
-      });
-
-      categoryField.addEventListener('click', () => {
-        categoryForm.classList.add('active');
-        darkOverlay.classList.add('active');
-      });
-
-      closeIcon.addEventListener('click', () => {
-        categoryForm.classList.remove('active');
-        darkOverlay.classList.remove('active');
-      });
-
-      darkOverlay.addEventListener('click', () => {
-        darkOverlay.classList.remove('active');
-        categoryForm.classList.remove('active');
-      });
-    </script> -->
   </body>
 </html>