working

fireworks.js

@@ -18,12 +18,14 @@ function toggleFirework() {
     fireworksContainer.style.display = 'none'; // hide fireworks
     if (!msgPrinted) {
       console.log('Fireworks hidden');
+      clearInterval(fireworksInterval);
       msgPrinted = true;
     }
   } else {
     fireworksContainer.style.display = 'block'; // show fireworks
     if (msgPrinted) {
       console.log('Fireworks visible');
+      startFireworks();
       msgPrinted = false;
     }
   }
@@ -44,9 +46,15 @@ function launchFirework() {
   const fireworkContainer = document.querySelector('.fireworks');
   if (!fireworkContainer) return;
 
+  // some colors for the fireworks
+  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
+
   // random position on the screen
   const x = Math.random() * window.innerWidth * 0.8 + window.innerWidth * 0.1; 
   const y = Math.random() * window.innerHeight * 0.7 + window.innerHeight * 0.15;
+  //const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15; // Mittiger
+  //const y = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.25; // Mittiger
+
 
 
   // create particles for the firework
@@ -60,30 +68,38 @@ function launchFirework() {
     const xOffset = Math.cos(angle) * distance;
     const yOffset = Math.sin(angle) * distance;
 
+    // get random color
+    const color = colors[Math.floor(Math.random() * colors.length)];
+
+    const colorDelay = Math.random() * 2; // Zufällige Verzögerung bis 2 Sekunden
+
     // set particle properties
     particle.style.left = `${x}px`;
     particle.style.top = `${y}px`;
     particle.style.setProperty('--x', `${xOffset}px`);
     particle.style.setProperty('--y', `${yOffset}px`);
+    particle.style.background = color;
+
+    particle.style.animationDelay = `${colorDelay}s`;
 
     // add particle to the container
     fireworkContainer.appendChild(particle);
 
-    // remove particle after animation ends
-    particle.addEventListener('animationend', () => {
+    // remove particle after animation ends so the DOM doesn't get filled with particles after 3 seconds
+    setTimeout(() => {
       particle.remove();
-    });
+    }, 3000); // Animationduration about 2.5 seconds
   }
 }
 
 // automaticly start fireworks
 function startFireworks() {
-  setInterval(() => {
+  fireworksInterval = setInterval(() => {
     const randomCount = Math.random() * 3 + 2; // 2 to 5 fireworks simultaneously
     for (let i = 0; i < randomCount; i++) {
       launchFirework();
     }
-  }, 600); // firework every 600 mil second
+  }, 1800) // firework every 600 mil second
 }
 
 // initialize snowflakes and add random snowflakes after the DOM is loaded