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:
parent
d6b87569a6
commit
3305c26750
@ -1,5 +1,6 @@
|
||||
import '/assets/scss/page.scss';
|
||||
|
||||
let eastereggsurl = '/assets/js/eastereggstrings.json'
|
||||
document.addEventListener("readystatechange", event => {
|
||||
if(event.target.readyState === 'complete') {
|
||||
initExternalLinks();
|
||||
@ -17,30 +18,20 @@ 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];
|
||||
document.body.addEventListener('click', evt => {
|
||||
fetch(eastereggsurl)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
return;
|
||||
}
|
||||
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) {
|
||||
// Check if the element is an interactive element or triggers an event
|
||||
return (
|
||||
|
Loading…
Reference in New Issue
Block a user