From 2ee72684bf5c43b31ebf812b80d2cdc5aa82f8f4 Mon Sep 17 00:00:00 2001
From: Kateryna-O <osadcukkata88@gmail.com>
Date: Sun, 28 Apr 2024 21:01:47 +0300
Subject: [PATCH 1/2] Update modal.css

---
 src/partials/modal/modal.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/partials/modal/modal.css b/src/partials/modal/modal.css
index 9121fe7..9ffbb21 100644
--- a/src/partials/modal/modal.css
+++ b/src/partials/modal/modal.css
@@ -10,6 +10,8 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .backdrop.is-open {
   opacity: 1;

From 5cd4b52df66fa10cbb442181401ff0ac546fbc56 Mon Sep 17 00:00:00 2001
From: Kateryna-O <osadcukkata88@gmail.com>
Date: Sun, 28 Apr 2024 21:03:57 +0300
Subject: [PATCH 2/2] added functionality

---
 src/partials/modal/modal.html |  2 +-
 src/partials/modal/modal.js   | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/partials/modal/modal.html b/src/partials/modal/modal.html
index 14d7b31..eeaf157 100644
--- a/src/partials/modal/modal.html
+++ b/src/partials/modal/modal.html
@@ -1,6 +1,6 @@
 <div class="backdrop">
   <div class="modal-window">
-    <button modal="window-btn">
+    <button modal="button" class="window-btn">
       <svg class="window-dtn-icon" width="22" height="22">
         <use href="./assets/svg/icons.svg#icon-x"></use>
       </svg>
diff --git a/src/partials/modal/modal.js b/src/partials/modal/modal.js
index e69de29..cc4052d 100644
--- a/src/partials/modal/modal.js
+++ b/src/partials/modal/modal.js
@@ -0,0 +1,22 @@
+const btnClose = document.querySelector('.window-btn');
+const windowBackdrop = document.querySelector('.backdrop');
+
+btnClose.addEventListener('click', () => {
+  closeWindow();
+});
+
+windowBackdrop.addEventListener('click', event => {
+  if (event.target === windowBackdrop) {
+    closeWindow();
+  }
+});
+
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape') {
+    closeWindow();
+  }
+});
+
+function closeWindow() {
+  windowBackdrop.classList.remove('is-open');
+}