Close modal on ESC

MichalSvatos · Dec 17, 2022 · 6c38c72 · 6c38c72
1 parent cf291b3
commit 6c38c72
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,9 @@ Have you ever been in the situation in which you need to give someone your conta
 - [ ] Modal - option to change font size (+/-)
 
 ## Changelog
+#### v1.0.2
+- Added functionality to close modal on ESC
+
 #### v1.0.1
 - First version with basic functionality
 - Some bugfixes and tweaks included

diff --git a/index.html b/index.html
@@ -9,17 +9,17 @@
 	<meta name="description" content="Mr. Shareman - simple app for quickly sharing some text on the screen.">
 
 	<!-- Favicons -->
-	<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png?v=1.0.0">
-	<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png?v=1.0.0">
-	<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png?v=1.0.0">
-	<link rel="manifest" href="./images/site.webmanifest?v=1.0.0">
-	<link rel="mask-icon" href="./images/safari-pinned-tab.svg?v=1.0.0" color="#0d2613">
+	<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png?v=1.0.2">
+	<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png?v=1.0.2">
+	<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png?v=1.0.2">
+	<link rel="manifest" href="./images/site.webmanifest?v=1.0.2">
+	<link rel="mask-icon" href="./images/safari-pinned-tab.svg?v=1.0.2" color="#0d2613">
 	<meta name="msapplication-TileColor" content="#00a300">
 	<meta name="theme-color" content="#0d2613">
 
 	<!-- #CSS -->
-	<link rel="stylesheet" href="./style.css?v=1.0.0">
-	<link rel="manifest" href="./manifest.json?v=1.0.0">
+	<link rel="stylesheet" href="./style.css?v=1.0.2">
+	<link rel="manifest" href="./manifest.json?v=1.0.2">
 </head>
 <body>
 <div class="glares"></div>
@@ -86,7 +86,7 @@ <h2 class="app__subtitle" data-title="▾ show me your screen ▾">
 		<!-- filled by JS -->
 	</div>
 </div>
-<script src="./script.js?v=1.0.0"></script>
+<script src="./script.js?v=1.0.2"></script>
 <script>
 	window.addEventListener('load', () => {
 		registerSW();

diff --git a/script.js b/script.js
@@ -3,7 +3,7 @@ const modalWindow = document.querySelector('.js-modal')
 
 // TODO:
 // - [ ] disabled state for buttons
-// - [ ] exit fullscreen on esc
+// - [x] exit fullscreen on esc
 // - [x] test fullscreen on different devices
 // - [ ] fix for iOS fullscreen
 
@@ -30,6 +30,12 @@ const closeModal = (modalWindow) => {
 		e.preventDefault()
 		modalWindow.classList.remove('is-visible')
 	})
+
+	document.addEventListener("keydown", (event) => {
+		if (event.key === 'Escape') {
+			modalWindow.classList.remove('is-visible')
+		}
+	})
 }
 
 const lightSwitch = (modalWindow) => {