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

2026-09-22 20:01:31 +00:00 · 2023-09-12 09:53:08 +07:00
parent 1fde39b14e 304f36df39
commit f46c052a80
1 changed files with 0 additions and 85 deletions
@@ -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>