Refactor easter egg functionality, fetch strings from JSON

- Refactored the `initEasterEgg` function to fetch easter egg strings from a JSON file instead of hardcoding them.
- Removed the unused `eastereggstrings` array.
- Updated event listener to use arrow function syntax (`evt`) instead of `event`.
- Added error handling for failed fetch requests.
This commit is contained in:
Jeroen De Meerleer 2024-02-07 16:15:43 +01:00
parent d6b87569a6
commit 3305c26750
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6

View File

@ -1,5 +1,6 @@
import '/assets/scss/page.scss'; import '/assets/scss/page.scss';
let eastereggsurl = '/assets/js/eastereggstrings.json'
document.addEventListener("readystatechange", event => { document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') { if(event.target.readyState === 'complete') {
initExternalLinks(); initExternalLinks();
@ -17,30 +18,20 @@ function initExternalLinks() {
} }
function initEasterEgg() { function initEasterEgg() {
document.body.addEventListener('click', function(event) { document.body.addEventListener('click', evt => {
// Check if the clicked element is an interactive element or triggers an event fetch(eastereggsurl)
if (!isInteractiveElement(event.target)) { .then((response) => {
let randomhue = Math.floor(Math.random() * 360) if (!response.ok) {
let randomstring = Math.floor(Math.random() * eastereggstrings.length); return;
// Apply the color shift filter to the body
document.body.style.filter = 'hue-rotate(' + randomhue + 'deg)';
document.querySelector('.easter-egg').innerHTML = eastereggstrings[randomstring];
} }
return response.json();
}).then((eastereggstrings) => {
let randomstring = Math.floor(Math.random() * eastereggstrings.length);
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) { function isInteractiveElement(element) {
// Check if the element is an interactive element or triggers an event // Check if the element is an interactive element or triggers an event
return ( return (