2 files changed, 35 insertions, 1 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 792f1f6..97d1f73 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,3 +1,7 @@
+:fullscreen {

+    color: blue;

+}

+

 body {

     min-height: 100vh;

 }

@@ -71,4 +75,4 @@ footer {
     text-transform: uppercase;

     font-weight: 600;

 }

-

+  
\ No newline at end of file
diff --git a/assets/js/fullscreen.js b/assets/js/fullscreen.js
new file mode 100644
index 0000000..e191854
--- /dev/null
+++ b/assets/js/fullscreen.js
@@ -0,0 +1,30 @@
+// get with web apis #fullscren element and on click toggle fullscreen
+const fullscreen = document.getElementById('fullscreen');
+const elem = document.documentElement;
+fullscreen.addEventListener('click', () => {
+  if (document.fullscreenElement) {
+    closeFullscreen();  
+  } else {
+    openFullscreen();
+  }
+});
+
+function openFullscreen() {
+  if (elem.requestFullscreen) {
+    elem.requestFullscreen();
+  } else if (elem.webkitRequestFullscreen) { /* Safari */
+    elem.webkitRequestFullscreen();
+  } else if (elem.msRequestFullscreen) { /* IE11 */
+    elem.msRequestFullscreen();
+  }
+}
+
+function closeFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) { /* Safari */
+    document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) { /* IE11 */
+    document.msExitFullscreen();
+  }
+}
\ No newline at end of file