2 files changed, 60 insertions, 0 deletions

diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
new file mode 100644
index 0000000..c6094d0
--- /dev/null
+++ b/assets/js/darkmode.js
@@ -0,0 +1,11 @@
+// get with web apis #fullscren element and on click toggle fullscreen
+const darkmode = document.getElementById('darkmode');
+const html = document.querySelector('html');
+darkmode.addEventListener('click', () => {
+    if (html.dataset.theme === 'dark') {
+        html.dataset.theme = 'light';
+    } else {
+        html.dataset.theme = 'dark';
+    }
+});
+
diff --git a/assets/js/fullscreen.js b/assets/js/fullscreen.js
new file mode 100644
index 0000000..e3cc342
--- /dev/null
+++ b/assets/js/fullscreen.js
@@ -0,0 +1,49 @@
+// page
+const fullscreen = document.getElementById('fullscreen');
+const fullscreenIcon = document.getElementById('fullscreen-icon');
+const smallscreenIcon = document.getElementById('smallscreen-icon');
+const elem = document.documentElement;
+
+// Functions
+
+function toggleFullscreen(event) {
+  // check if the event is a keydown event or a click event
+  if (event.type === 'keydown') {
+    // check if the key pressed is '/' key
+    if (event.key !== '/') return;
+  }
+  if (document.fullscreenElement) {
+    closeFullscreen();  
+  } else {
+    openFullscreen();
+  }
+}
+
+function openFullscreen() {
+  smallscreenIcon.classList.toggle('hide');
+  fullscreenIcon.classList.toggle('hide');
+  if (elem.requestFullscreen) {
+    elem.requestFullscreen();
+  } else if (elem.webkitRequestFullscreen) { /* Safari */
+    elem.webkitRequestFullscreen();
+  } else if (elem.msRequestFullscreen) { /* IE11 */
+    elem.msRequestFullscreen();
+  }
+}
+
+function closeFullscreen() {
+  smallscreenIcon.classList.toggle('hide');
+  fullscreenIcon.classList.toggle('hide');
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) { /* Safari */
+    document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) { /* IE11 */
+    document.msExitFullscreen();
+  }
+}
+
+// Listeners
+
+fullscreen.addEventListener('click', toggleFullscreen);
+document.addEventListener('keydown', toggleFullscreen);
\ No newline at end of file