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.
This commit is contained in:
Jeroen De Meerleer 2024-02-07 12:41:46 +01:00
parent c7b7285403
commit 1c38432467
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6

View File

@ -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;