alvin/ict-algemeen-opdrachten
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/ict-algemeen-opdrachten.git synced 2026-03-06 13:23:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add comments and styling enhancements to number guessing game

Browse Source
This commit is contained in:
vista-man
2025-01-27 20:22:56 +01:00
parent 117ed9636a
commit 05e773e405
3 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
JavaScript/raad het getal/index.html
View File

@@ -8,10 +8,15 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Titel van de pagina -->
<h1>Raad het getal</h1>
<!-- Instructies voor de gebruiker -->
<p>Voer een getal in tussen 1 en 100:</p>
<!-- Invoerveld voor de gok van de gebruiker -->
<input type="number" id="guessInput">
<!-- Knop om de gok te controleren -->
<button onclick="checkGuess()">Gok</button>
<!-- Paragraaf om het resultaat weer te geven -->
<p id="result"></p>
</body>
</html>

14
JavaScript/raad het getal/raadgetal.js
View File

@@ -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);

8
JavaScript/raad het getal/style.css
View File

@@ -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);