feat: added callback click listeners

assets/js/main.js

@@ -3,3 +3,16 @@ import './step-by-step.js';
 import './team.js';
 import './faq.js';
 import './nav.js';
+import './modals.js';
+
+const maskOptions = {
+  mask: '+{7} (000) 000 00 00',
+};
+
+const phoneInputClassNames = ['input--phone'];
+
+const phoneInputs = phoneInputClassNames
+  .map((name) => document.querySelectorAll(`.${name}`))
+  .reduce((acc, array) => [...acc, ...array], []);
+
+phoneInputs.forEach((inputElement) => IMask(inputElement, maskOptions));

assets/js/modals.js

@@ -0,0 +1,36 @@
+const callbackButtons = document.querySelectorAll('.button--callback');
+const callbackModal = document.querySelector('.modal--callback');
+const thanksModal = document.querySelector('.modal--thanks');
+
+callbackButtons.forEach((button) => {
+  button.addEventListener('click', () => {
+    if (callbackModal) {
+      callbackModal.classList.add('active');
+      thanksModal.classList.remove('active');
+    }
+  });
+});
+
+[callbackModal, thanksModal].forEach((modal) => {
+  modal.addEventListener('click', (event) => {
+    const isModal = event.target.classList.contains('modal');
+    const isModalBody = event.target.classList.contains('modal__body');
+    if (isModal || isModalBody) event.currentTarget.classList.remove('active');
+  });
+});
+
+const modalForms = document.querySelectorAll('.modal__form');
+const callbackForms = document.querySelectorAll('.callback__form');
+
+[...modalForms, ...callbackForms].forEach((form) => {
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const name = formData.get('name');
+    const phone = formData.get('phone');
+    console.log(name, phone)
+    event.currentTarget.reset();
+    if (callbackModal) callbackModal.classList.remove('active');
+    if (thanksModal) thanksModal.classList.add('active');
+  });
+});