Add Easter Egg functionality to the page.js file

This commit adds an Easter Egg feature to the page.js file. When the document is fully loaded, the initEasterEgg() function is called, which listens for clicks on the body element. If the clicked element is not an interactive element or does not trigger an event, a random hue shift filter is applied to the body and a random string from a predefined list of strings is displayed in a designated HTML element with class "easter-egg". The commit also includes a helper function, isInteractiveElement(), which checks if an element is interactive or triggers an event.

assets/js/page.js

@@ -3,6 +3,7 @@ import '/assets/scss/page.scss';
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
         initExternalLinks();
+        initEasterEgg();
     }
 });
 
@@ -15,6 +16,49 @@ function initExternalLinks() {
     })
 }
 
+function initEasterEgg() {
+    document.body.addEventListener('click', function(event) {
+        // Check if the clicked element is an interactive element or triggers an event
+        if (!isInteractiveElement(event.target)) {
+            let randomhue = Math.floor(Math.random() * 360)
+            let randomstring = Math.floor(Math.random() * eastereggstrings.length);
+            // Apply the color shift filter to the body
+            document.body.style.filter = 'hue-rotate(' + randomhue + 'deg)';
+            document.querySelector('.easter-egg').innerHTML = eastereggstrings[randomstring];
+        }
+    });
+}
+
+let eastereggstrings = [
+    "No",
+    "Stop it",
+    "It not funny anymore",
+    "Odette does not like this",
+    "Garry has asked to stop scaring the birds",
+    "Seriously?",
+    "I'm out of here",
+    "Stop poking me. I' thinking",
+    "Oh boy"
+]
+
+function isInteractiveElement(element) {
+    // Check if the element is an interactive element or triggers an event
+    return (
+        element.tagName === 'A' ||
+        element.tagName === 'BUTTON' ||
+        element.tagName === 'INPUT' ||
+        element.tagName === 'SELECT' ||
+        element.tagName === 'TEXTAREA' ||
+        element.getAttribute('onclick') !== null ||
+        element.getAttribute('onmousedown') !== null ||
+        element.getAttribute('onmouseup') !== null ||
+        element.getAttribute('onmouseover') !== null ||
+        element.getAttribute('onmouseout') !== null ||
+        element.getAttribute('onmousemove') !== null ||
+        element.getAttribute('oncontextmenu') !== null
+    );
+}
+
 const isExternalURL = (url) => {
     if(url.startsWith('/')) return false;
     return new URL(url).origin !== location.origin;