add random

halloween.js

@@ -1,4 +1,7 @@
 const halloween = true; // enable/disable halloween
+const randomSymbols = true; // enable more random symbols
+const randomSymbolsMobile = false; // enable random symbols on mobile devices
+const halloweenCount = 25; // count of random extra symbols
 
 let msgPrinted = false; // flag to prevent multiple console messages
 
@@ -75,9 +78,46 @@ function createHalloween() {
 }
 
 
+function addRandomSymbols(count) {
+  const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container
+  if (!halloweenContainer) return; // exit if halloween container is not found
+
+  console.log('Adding random halloween symbols');
+
+
+  for (let i = 0; i < count; i++) {
+    // create a new halloween elements
+    const halloween = document.createElement('div');
+    halloween.classList.add('halloween');
+
+    // pick a random halloween symbol
+    halloween.textContent = images[Math.floor(Math.random() * images.length)];
+
+    // set random horizontal position, animation delay and size(uncomment lines to enable) 
+    const randomLeft = Math.random() * 100; // position (0% to 100%)
+    //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
+    const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
+    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+
+    // apply styles
+    halloween.style.left = `${randomLeft}%`;
+    halloween.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+
+    // add the halloween to the container
+    halloweenContainer.appendChild(halloween);
+  }
+  console.log('Random halloween symbols added');
+}
+
+
 // initialize halloween after the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
   if (!halloween) return; // exit if halloween is disabled
   createHalloween();
-  toogleHalloween();
+  toggleHalloween();
+
+  const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
+  if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random halloweens only on larger screens, unless enabled for mobile devices
+    addRandomSymbols(halloweenCount);
+  }
 });