From dcf8966349f8ead23f85aec4039940da9a0680fb Mon Sep 17 00:00:00 2001
From: Viktoriia Cherkashyna <vikushacherk98@gmail.com>
Date: Wed, 24 May 2023 21:23:43 +0300
Subject: [PATCH 1/4] added scroll-block when modal window is open

---
 src/js/modal.js        | 76 ++++++++++++++++++++++--------------------
 src/js/thanks-modal.js |  2 ++
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/js/modal.js b/src/js/modal.js
index 79666a2..6d90ce9 100644
--- a/src/js/modal.js
+++ b/src/js/modal.js
@@ -1,52 +1,55 @@
-
 var modalButtons = document.querySelectorAll('.js-open-modal'),
-       overlay      = document.querySelector('.js-overlay-modal'),
-       closeButtons = document.querySelectorAll('.js-modal-close');
-
-
-   modalButtons.forEach(function(item){
-
-   item.addEventListener('click', function(e) {
+  overlay = document.querySelector('.js-overlay-modal'),
+  closeButtons = document.querySelectorAll('.js-modal-close');
 
-       e.preventDefault();
+modalButtons.forEach(function (item) {
+  item.addEventListener('click', function (e) {
+    e.preventDefault();
 
-       var modalId = this.getAttribute('data-modal'),
-             modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]');
+    var modalId = this.getAttribute('data-modal'),
+      modalElem = document.querySelector(
+        '.modal[data-modal="' + modalId + '"]'
+      );
 
-         modalElem.classList.add('active');
-         overlay.classList.add('active');
-      }); 
+    modalElem.classList.add('active');
+    overlay.classList.add('active');
 
-   });
+    document.body.style.overflow = 'hidden';
+  });
+});
 
+closeButtons.forEach(function (item) {
+  item.addEventListener('click', function (e) {
+    var parentModal = this.closest('.modal');
 
-   closeButtons.forEach(function(item){
+    parentModal.classList.remove('active');
+    overlay.classList.remove('active');
 
-      item.addEventListener('click', function(e) {
-         var parentModal = this.closest('.modal');
+    document.body.style.overflow = 'auto';
+  });
+}); // end foreach
 
-         parentModal.classList.remove('active');
-         overlay.classList.remove('active');
-      });
+document.body.addEventListener(
+  'keyup',
+  function (e) {
+    var key = e.keyCode;
 
-   }); // end foreach
+    if (key == 27) {
+      document.querySelector('.modal.active').classList.remove('active');
+      document.querySelector('.overlay').classList.remove('active');
 
+      document.body.style.overflow = 'auto';
+    }
+  },
+  false
+);
 
-    document.body.addEventListener('keyup', function (e) {
-        var key = e.keyCode;
+overlay.addEventListener('click', function () {
+  document.querySelector('.modal.active').classList.remove('active');
+  this.classList.remove('active');
 
-        if (key == 27) {
-
-            document.querySelector('.modal.active').classList.remove('active');
-            document.querySelector('.overlay').classList.remove('active');
-        };
-    }, false);
-
-
-    overlay.addEventListener('click', function() {
-        document.querySelector('.modal.active').classList.remove('active');
-        this.classList.remove('active');
-    });
+  document.body.style.overflow = 'auto';
+});
 
 // (() => {
 //   const refs = {
@@ -62,4 +65,3 @@ var modalButtons = document.querySelectorAll('.js-open-modal'),
 //     refs.modal.classList.toggle("is-hidden");
 //   }
 // })();
-
diff --git a/src/js/thanks-modal.js b/src/js/thanks-modal.js
index c26f33c..4a4473e 100644
--- a/src/js/thanks-modal.js
+++ b/src/js/thanks-modal.js
@@ -7,10 +7,12 @@ const closeBtns = document.querySelectorAll('.close-btn');
 const openSuccessModal = () => {
   backdrop.classList.add(MODAL_ACTIVE_CLASS_NAME);
   thankModal.classList.add(MODAL_ACTIVE_CLASS_NAME);
+  document.body.style.overflow = 'hidden';
 };
 const closeSuccessModal = () => {
   thankModal.classList.remove(MODAL_ACTIVE_CLASS_NAME);
   backdrop.classList.remove(MODAL_ACTIVE_CLASS_NAME);
+  document.body.style.overflow = 'auto';
 };
 closeBtns.forEach(btn => {
   btn.addEventListener('click', e => {

From 4993fef05b7004c792832a97e72262cd1bd49b79 Mon Sep 17 00:00:00 2001
From: Viktoriia Cherkashyna <vikushacherk98@gmail.com>
Date: Wed, 24 May 2023 21:37:46 +0300
Subject: [PATCH 2/4] Fixed modal js formatting

---
 src/js/modal.js | 80 +++++++++++++++++++++++++------------------------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/js/modal.js b/src/js/modal.js
index 6d90ce9..c172f85 100644
--- a/src/js/modal.js
+++ b/src/js/modal.js
@@ -1,55 +1,56 @@
+
 var modalButtons = document.querySelectorAll('.js-open-modal'),
-  overlay = document.querySelector('.js-overlay-modal'),
-  closeButtons = document.querySelectorAll('.js-modal-close');
+       overlay      = document.querySelector('.js-overlay-modal'),
+       closeButtons = document.querySelectorAll('.js-modal-close');
+
+
+   modalButtons.forEach(function(item){
+
+   item.addEventListener('click', function(e) {
 
-modalButtons.forEach(function (item) {
-  item.addEventListener('click', function (e) {
-    e.preventDefault();
+       e.preventDefault();
 
-    var modalId = this.getAttribute('data-modal'),
-      modalElem = document.querySelector(
-        '.modal[data-modal="' + modalId + '"]'
-      );
+       var modalId = this.getAttribute('data-modal'),
+             modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]');
 
-    modalElem.classList.add('active');
-    overlay.classList.add('active');
+         modalElem.classList.add('active');
+         overlay.classList.add('active');
+         document.body.style.overflow = 'hidden';
+      }); 
 
-    document.body.style.overflow = 'hidden';
-  });
-});
+   });
 
-closeButtons.forEach(function (item) {
-  item.addEventListener('click', function (e) {
-    var parentModal = this.closest('.modal');
 
-    parentModal.classList.remove('active');
-    overlay.classList.remove('active');
+   closeButtons.forEach(function(item){
 
-    document.body.style.overflow = 'auto';
-  });
-}); // end foreach
+      item.addEventListener('click', function(e) {
+         var parentModal = this.closest('.modal');
 
-document.body.addEventListener(
-  'keyup',
-  function (e) {
-    var key = e.keyCode;
+         parentModal.classList.remove('active');
+         overlay.classList.remove('active');
+         document.body.style.overflow = 'auto';
+      });
 
-    if (key == 27) {
-      document.querySelector('.modal.active').classList.remove('active');
-      document.querySelector('.overlay').classList.remove('active');
+   }); // end foreach
 
-      document.body.style.overflow = 'auto';
-    }
-  },
-  false
-);
 
-overlay.addEventListener('click', function () {
-  document.querySelector('.modal.active').classList.remove('active');
-  this.classList.remove('active');
+    document.body.addEventListener('keyup', function (e) {
+        var key = e.keyCode;
 
-  document.body.style.overflow = 'auto';
-});
+        if (key == 27) {
+
+            document.querySelector('.modal.active').classList.remove('active');
+            document.querySelector('.overlay').classList.remove('active');
+            document.body.style.overflow = 'auto';
+        };
+    }, false);
+
+
+    overlay.addEventListener('click', function() {
+        document.querySelector('.modal.active').classList.remove('active');
+        this.classList.remove('active');
+        document.body.style.overflow = 'auto';
+    });
 
 // (() => {
 //   const refs = {
@@ -65,3 +66,4 @@ overlay.addEventListener('click', function () {
 //     refs.modal.classList.toggle("is-hidden");
 //   }
 // })();
+

From e5fa9aab5779cc3c31967fe4b6ee4cd06c8aa37b Mon Sep 17 00:00:00 2001
From: Viktoriia Cherkashyna <vikushacherk98@gmail.com>
Date: Wed, 24 May 2023 21:59:06 +0300
Subject: [PATCH 3/4] fixed card input

---
 src/partials/order-mod.html | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/partials/order-mod.html b/src/partials/order-mod.html
index 9278c51..b5ee0bb 100644
--- a/src/partials/order-mod.html
+++ b/src/partials/order-mod.html
@@ -246,7 +246,9 @@ <h3 class="order-item-name">Fruits Basket</h3>
         placeholder="Enter full name..."
       />
 
-      <label class="contact-label visually-hidden" for="user-email">Email</label>
+      <label class="contact-label visually-hidden" for="user-email"
+        >Email</label
+      >
       <input
         class="input-modal-field"
         type="email"
@@ -256,13 +258,13 @@ <h3 class="order-item-name">Fruits Basket</h3>
         placeholder="Enter email..."
       />
 
-      <label class="contact-label visually-hidden" for="card-nomber">Card nomber</label>
+      <label class="contact-label visually-hidden" for="card-nomber"
+        >Card number</label
+      >
       <input
         class="input-modal-field"
-        type="number"
-        step="1"
-        min="5"
-        max="9999999999999999"
+        type="text"
+        pattern="^[0-9]{5,45}$"
         required
         name="card-nomber"
         id="card-nomber"

From 8b25c3f07f4f968a53ffb4eaf9da217b7aa1b3b7 Mon Sep 17 00:00:00 2001
From: Viktoriia Cherkashyna <vikushacherk98@gmail.com>
Date: Wed, 24 May 2023 22:05:06 +0300
Subject: [PATCH 4/4] fixed card input

---
 src/partials/order-mod.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/partials/order-mod.html b/src/partials/order-mod.html
index b5ee0bb..d8f199b 100644
--- a/src/partials/order-mod.html
+++ b/src/partials/order-mod.html
@@ -265,6 +265,7 @@ <h3 class="order-item-name">Fruits Basket</h3>
         class="input-modal-field"
         type="text"
         pattern="^[0-9]{5,45}$"
+        title="Your card number must be between 5 to 45 digitals."
         required
         name="card-nomber"
         id="card-nomber"