From 05e773e40501e51a40747f20dec36b54d1d71166 Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Mon, 27 Jan 2025 20:22:56 +0100 Subject: [PATCH] Add comments and styling enhancements to number guessing game --- JavaScript/raad het getal/index.html | 5 +++++ JavaScript/raad het getal/raadgetal.js | 14 +++++++++++++- JavaScript/raad het getal/style.css | 8 +++++++- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/JavaScript/raad het getal/index.html b/JavaScript/raad het getal/index.html index db10524..17b4362 100644 --- a/JavaScript/raad het getal/index.html +++ b/JavaScript/raad het getal/index.html @@ -8,10 +8,15 @@ +

Raad het getal

+

Voer een getal in tussen 1 en 100:

+ + +

diff --git a/JavaScript/raad het getal/raadgetal.js b/JavaScript/raad het getal/raadgetal.js index 3d36608..0611163 100644 --- a/JavaScript/raad het getal/raadgetal.js +++ b/JavaScript/raad het getal/raadgetal.js @@ -1,34 +1,46 @@ +// Genereer een willekeurig doelgetal tussen 1 en 100 const targetNumber = Math.floor(Math.random() * 100) + 1; let guess = null; +// Functie om de gok van de gebruiker te controleren function checkGuess() { + // Haal de waarde van de invoer op en zet deze om naar een geheel getal guess = parseInt(document.getElementById("guessInput").value, 10); + // Controleer of de gok te laag, te hoog of correct is if (guess < targetNumber) { document.getElementById("result").innerText = "Te laag! Probeer het opnieuw."; } else if (guess > targetNumber) { 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(); + startConfetti(); // Start het confetti-effect bij een correcte gok } else { document.getElementById("result").innerText = "Ongeldige invoer. Voer een getal in tussen 1 en 100."; } } +// Functie om het confetti-effect te starten function startConfetti() { + // Maak een container voor de confetti const confettiContainer = document.createElement('div'); confettiContainer.id = 'confetti-container'; document.body.appendChild(confettiContainer); + // Definieer de kleuren voor de confetti + const colors = ['#ff0', '#f00', '#0f0', '#00f', '#f0f', '#0ff']; + + // Maak 100 confetti-elementen met willekeurige kleuren en posities for (let i = 0; i < 100; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; confetti.style.left = `${Math.random() * 100}vw`; + confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.animationDelay = `${Math.random() * 2}s`; confettiContainer.appendChild(confetti); } + // Verwijder de confetti-container na 5 seconden setTimeout(() => { document.body.removeChild(confettiContainer); }, 5000); diff --git a/JavaScript/raad het getal/style.css b/JavaScript/raad het getal/style.css index f8bc99e..649bbe9 100644 --- a/JavaScript/raad het getal/style.css +++ b/JavaScript/raad het getal/style.css @@ -1,3 +1,4 @@ +/* Basisstijl voor de body */ body { font-family: Arial, sans-serif; display: flex; @@ -9,22 +10,26 @@ body { margin: 0; } +/* Stijl voor de koptekst */ h1 { color: #333; } +/* Stijl voor de invoer en knop */ input, button { padding: 10px; margin: 5px; font-size: 16px; } +/* Stijl voor het resultaatbericht */ #result { margin-top: 20px; font-size: 18px; color: #555; } +/* Stijl voor de confetti-container */ #confetti-container { position: fixed; top: 0; @@ -35,14 +40,15 @@ input, button { overflow: hidden; } +/* Stijl voor de confetti-elementen */ .confetti { position: absolute; width: 10px; height: 10px; - background-color: #ff0; animation: fall 3s linear infinite; } +/* Animatie voor de vallende confetti */ @keyframes fall { 0% { transform: translateY(-100vh) rotate(0deg);