computational-thinking/javascript.js at main · CMD-Groningen/computational-thinking · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// ================================================
// GRATIS RONDJES MET HET REUZENRAD OP DE KERMIS!!!
// ================================================

// Opdracht om computational thinking te oefenen.
// CASUS: GRATIS RONDJES MET HET REUZENRAD OP DE KERMIS!!!
// Een kermis uitbater bedenkt een actie om kermisklanten gratis ritjes op het reuzenrad aan te bieden. Bedenk een oplossing die voor de kermisklant en de uitbater inzicht kan verschaffen tijdens het faciliteren van de gratis rondjes op het reuzenrad!

// je moet kunnen zien hoeveel rondjes hij/zij mag maken.
// je moet kunnen zien hoeveel rondjes hij/zij al heeft gemaakt.
// je moet kunnen zien hoeveel gratis rondjes hij/zij nog tegoed heeft.
//

// ================================================
// GRATIS 4 RONDJES MET HET REUZENRAD OP DE KERMIS!!!
// ================================================

let gratis_aantal_ritjes = 4;
let aantal_reeds_geweest = 0;
let stempelkaart = document.querySelector("#stempelkaart");

// Updater (Functie) om de kaart te updaten
function update_Stempelkaart() {
	let resterend = gratis_aantal_ritjes - aantal_reeds_geweest;

	if (aantal_reeds_geweest >= gratis_aantal_ritjes) {
		stempelkaart.innerHTML = `
      Je gratis ritjes zijn op! <br>
      Vraag een nieuwe stempelkaart!
    `;
	} else {
		stempelkaart.innerHTML = `
      Je hebt recht op ${gratis_aantal_ritjes} keer gaan! <br>
      ======================== <br>
      Je bent reeds ${aantal_reeds_geweest} keer geweest! <br>
      Je hebt nog ${resterend} keer te goed!<br>
    `;
	}
}

// Toon meteen de stempelkaart bij het laden
update_Stempelkaart();

// INPUT! Er wordt gestempeld!
document.querySelector(".stempelbutton").addEventListener("click", function () {
	aantal_reeds_geweest = aantal_reeds_geweest + 1; // 1 erbij!
	update_Stempelkaart(); // gewoon stempelkaart updaten!
});