alvin/ict-algemeen-opdrachten
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/ict-algemeen-opdrachten.git synced 2026-03-06 11:06:59 +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"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<!-- Titel van de pagina -->
<h1>Raad het getal</h1> <h1>Raad het getal</h1>
<!-- Instructies voor de gebruiker -->
<p>Voer een getal in tussen 1 en 100:</p> <p>Voer een getal in tussen 1 en 100:</p>
<!-- Invoerveld voor de gok van de gebruiker -->
<input type="number" id="guessInput"> <input type="number" id="guessInput">
<!-- Knop om de gok te controleren -->
<button onclick="checkGuess()">Gok</button> <button onclick="checkGuess()">Gok</button>
<!-- Paragraaf om het resultaat weer te geven -->
<p id="result"></p> <p id="result"></p>
</body> </body>
</html> </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; const targetNumber = Math.floor(Math.random() * 100) + 1;
let guess = null; let guess = null;
// Functie om de gok van de gebruiker te controleren
function checkGuess() { function checkGuess() {
// Haal de waarde van de invoer op en zet deze om naar een geheel getal
guess = parseInt(document.getElementById("guessInput").value, 10); guess = parseInt(document.getElementById("guessInput").value, 10);
// Controleer of de gok te laag, te hoog of correct is
if (guess < targetNumber) { if (guess < targetNumber) {
document.getElementById("result").innerText = "Te laag! Probeer het opnieuw."; document.getElementById("result").innerText = "Te laag! Probeer het opnieuw.";
} else if (guess > targetNumber) { } else if (guess > targetNumber) {
document.getElementById("result").innerText = "Te hoog! Probeer het opnieuw."; document.getElementById("result").innerText = "Te hoog! Probeer het opnieuw.";
} else if (guess === targetNumber) { } else if (guess === targetNumber) {
document.getElementById("result").innerText = "Gefeliciteerd! Je hebt het juiste getal geraden."; document.getElementById("result").innerText = "Gefeliciteerd! Je hebt het juiste getal geraden.";
startConfetti(); startConfetti(); // Start het confetti-effect bij een correcte gok
} else { } else {
document.getElementById("result").innerText = "Ongeldige invoer. Voer een getal in tussen 1 en 100."; document.getElementById("result").innerText = "Ongeldige invoer. Voer een getal in tussen 1 en 100.";
} }
} }
// Functie om het confetti-effect te starten
function startConfetti() { function startConfetti() {
// Maak een container voor de confetti
const confettiContainer = document.createElement('div'); const confettiContainer = document.createElement('div');
confettiContainer.id = 'confetti-container'; confettiContainer.id = 'confetti-container';
document.body.appendChild(confettiContainer); 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++) { for (let i = 0; i < 100; i++) {
const confetti = document.createElement('div'); const confetti = document.createElement('div');
confetti.className = 'confetti'; confetti.className = 'confetti';
confetti.style.left = `${Math.random() * 100}vw`; confetti.style.left = `${Math.random() * 100}vw`;
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = `${Math.random() * 2}s`; confetti.style.animationDelay = `${Math.random() * 2}s`;
confettiContainer.appendChild(confetti); confettiContainer.appendChild(confetti);
} }
// Verwijder de confetti-container na 5 seconden
setTimeout(() => { setTimeout(() => {
document.body.removeChild(confettiContainer); document.body.removeChild(confettiContainer);
}, 5000); }, 5000);

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

@@ -1,3 +1,4 @@
/* Basisstijl voor de body */
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
display: flex; display: flex;
@@ -9,22 +10,26 @@ body {
margin: 0; margin: 0;
} }
/* Stijl voor de koptekst */
h1 { h1 {
color: #333; color: #333;
} }
/* Stijl voor de invoer en knop */
input, button { input, button {
padding: 10px; padding: 10px;
margin: 5px; margin: 5px;
font-size: 16px; font-size: 16px;
} }
/* Stijl voor het resultaatbericht */
#result { #result {
margin-top: 20px; margin-top: 20px;
font-size: 18px; font-size: 18px;
color: #555; color: #555;
} }
/* Stijl voor de confetti-container */
#confetti-container { #confetti-container {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -35,14 +40,15 @@ input, button {
overflow: hidden; overflow: hidden;
} }
/* Stijl voor de confetti-elementen */
.confetti { .confetti {
position: absolute; position: absolute;
width: 10px; width: 10px;
height: 10px; height: 10px;
background-color: #ff0;
animation: fall 3s linear infinite; animation: fall 3s linear infinite;
} }
/* Animatie voor de vallende confetti */
@keyframes fall { @keyframes fall {
0% { 0% {
transform: translateY(-100vh) rotate(0deg); transform: translateY(-100vh) rotate(0deg);