Add confetti effect on correct guess in number guessing game

JavaScript/raad het getal/raadgetal.js

@@ -10,7 +10,26 @@ function checkGuess() {
         document.getElementById("result").innerText = "Te hoog! Probeer het opnieuw.";
     } else if (guess === targetNumber) {
         document.getElementById("result").innerText = "Gefeliciteerd! Je hebt het juiste getal geraden.";
+        startConfetti();
     } else {
         document.getElementById("result").innerText = "Ongeldige invoer. Voer een getal in tussen 1 en 100.";
     }
 }
+
+function startConfetti() {
+    const confettiContainer = document.createElement('div');
+    confettiContainer.id = 'confetti-container';
+    document.body.appendChild(confettiContainer);
+
+    for (let i = 0; i < 100; i++) {
+        const confetti = document.createElement('div');
+        confetti.className = 'confetti';
+        confetti.style.left = `${Math.random() * 100}vw`;
+        confetti.style.animationDelay = `${Math.random() * 2}s`;
+        confettiContainer.appendChild(confetti);
+    }
+
+    setTimeout(() => {
+        document.body.removeChild(confettiContainer);
+    }, 5000);
+}

JavaScript/raad het getal/style.css

@@ -24,3 +24,30 @@ input, button {
     font-size: 18px;
     color: #555;
 }
+
+#confetti-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.confetti {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: #ff0;
+    animation: fall 3s linear infinite;
+}
+
+@keyframes fall {
+    0% {
+        transform: translateY(-100vh) rotate(0deg);
+    }
+    100% {
+        transform: translateY(100vh) rotate(360deg);
+    }
+}