https://tutorsheba.com/assets/js/script.js

1'use strict';
2
3// modal variables
4const modal = document.querySelector('[data-modal]');
5const modalCloseBtn = document.querySelector('[data-modal-close]');
6const modalCloseOverlay = document.querySelector('[data-modal-overlay]');
7
8// modal function
9const modalCloseFunc = function () { modal.classList.add('closed') }
10
11// modal eventListener
12modalCloseOverlay?.addEventListener('click', modalCloseFunc);
13modalCloseBtn?.addEventListener('click', modalCloseFunc);
14
15
16
17
18
19// notification toast variables
20const notificationToast = document.querySelector('[data-toast]');
21const toastCloseBtn = document.querySelector('[data-toast-close]');
22
23// notification toast eventListener
24toastCloseBtn?.addEventListener('click', function () {
25  notificationToast.classList.add('closed');
26});
27
28
29
30
31
32// mobile menu variables
33const mobileMenuOpenBtn = document.querySelectorAll('[data-mobile-menu-open-btn]');
34const mobileMenu = document.querySelectorAll('[data-mobile-menu]');
35const mobileMenuCloseBtn = document.querySelectorAll('[data-mobile-menu-close-btn]');
36const overlay = document.querySelector('[data-overlay]');
37
38for (let i = 0; i < mobileMenuOpenBtn.length; i++) {
39
40  // mobile menu function
41  const mobileMenuCloseFunc = function () {
42    mobileMenu[i].classList.remove('active');
43    overlay.classList.remove('active');
44  }
45
46  mobileMenuOpenBtn[i]?.addEventListener('click', function () {
47    mobileMenu[i].classList.add('active');
48    overlay.classList.add('active');
49  });
50
51  mobileMenuCloseBtn[i]?.addEventListener('click', mobileMenuCloseFunc);
52  overlay?.addEventListener('click', mobileMenuCloseFunc);
53
54}
55
56
57
58
59
60// accordion variables
61const accordionBtn = document.querySelectorAll('[data-accordion-btn]');
62const accordion = document.querySelectorAll('[data-accordion]');
63
64for (let i = 0; i < accordionBtn.length; i++) {
65
66  accordionBtn[i]?.addEventListener('click', function () {
67
68    const clickedBtn = this.nextElementSibling.classList.contains('active');
69
70    for (let i = 0; i < accordion.length; i++) {
71
72      if (clickedBtn) break;
73
74      if (accordion[i].classList.contains('active')) {
75
76        accordion[i].classList.remove('active');
77        accordionBtn[i].classList.remove('active');
78
79      }
80
81    }
82
83    this.nextElementSibling.classList.toggle('active');
84    this.classList.toggle('active');
85
86  });
87
88}