diff --git a/JavaScript/raad het getal/raadgetal.js b/JavaScript/raad het getal/raadgetal.js index e8492f7..3d36608 100644 --- a/JavaScript/raad het getal/raadgetal.js +++ b/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); +} diff --git a/JavaScript/raad het getal/style.css b/JavaScript/raad het getal/style.css index 56ef62c..f8bc99e 100644 --- a/JavaScript/raad het getal/style.css +++ b/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); + } +}