KipOef Flashcards
Flashcard 1: De setup functie
Beschrijving: De setup functie is verantwoordelijk voor het initialiseren van de event listeners.
Taak: Schrijf de code die de setup functie definieert. Deze functie moet een event listener toevoegen aan het element met de ID “selStaat” die de functie kipStaat aanroept wanneer de selectie verandert. Voeg ook een event listener toe aan het element met de ID “txtLetter” die de functie tellenLetters aanroept wanneer er input is.
// Schrijf de code voor de setup functie
const setup = () => {
// Voeg hier de event listeners toe
document.getElementById(“selStaat”).addEventListener(“change”, kipStaat);
document.getElementById(“txtLetter”).addEventListener(“input”, tellenLetters);
}
Flashcard 2: De kipStaat functie - Deel 1
Beschrijving: De kipStaat functie past de afbeelding en de tekst aan op basis van de geselecteerde optie in de dropdown met de ID “selStaat”.
Taak: Schrijf het begin van de kipStaat functie. Deze functie moet eerst de nodige elementen ophalen (de select dropdown, de image container en de note container).
// Schrijf de code voor het begin van de kipStaat functie
const kipStaat = () => {
// Haal de elementen op
let staatOptions = document.getElementById(“selStaat”).options;
let img = document.getElementById(“img”);
let note = document.getElementById(“note”);
// ... (de rest van de functie komt in de volgende flashcards) }
Flashcard 3: De kipStaat functie - Deel 2 (Kip met Ei)
Beschrijving: Vervolg van de kipStaat functie.
Taak: Schrijf de code die de image container en de note container aanpast wanneer de tweede optie (index 1) in de dropdown “selStaat” geselecteerd is (kip met ei). Zorg ervoor dat de juiste afbeelding wordt weergegeven en de juiste tekst in de note verschijnt.
// Vervolg van de kipStaat functie (kip met ei)
if (staatOptions[1].selected) {
img.className = “”;
img.innerHTML = <img src="img/with-egg.png" alt="Met ei">;
note.innerHTML = “Hierboven, een kip met een ei”;
}
// ... (de rest van de functie komt in de volgende flashcard)
Flashcard 7: De tellenLetters functie - Deel 3 (Output)
Beschrijving: Vervolg van de tellenLetters functie.
Taak: Schrijf de code die de inhoud van de note container reset, de kipStaat functie aanroept en vervolgens het resultaat van de telling weergeeft in de note container.
document.getElementById(“note”).innerHTML = “”;
kipStaat();
document.getElementById(“note”).innerHTML += <br> Letter "${input}" komt ${count} keer voor in bovenstaande zin.;
}
Flashcard 4: De kipStaat functie - Deel 3 (Kip zonder Ei)
Beschrijving: Vervolg van de kipStaat functie.
Taak: Schrijf de code die de image container en de note container aanpast wanneer de derde optie (index 2) in de dropdown “selStaat” geselecteerd is (kip zonder ei). Zorg ervoor dat de juiste afbeelding wordt weergegeven en de juiste tekst in de note verschijnt.
// Vervolg van de kipStaat functie (kip zonder ei)
if (staatOptions[2].selected) {
img.className = “”;
img.innerHTML = <img src="img/without-egg.png" alt="Zonder ei">;
note.innerHTML = “Hierboven, een kip zonder een ei”;
}
}
Flashcard 5: De tellenLetters functie - Deel 1
Beschrijving: De tellenLetters functie telt hoe vaak een specifieke letter voorkomt in de tekst van de note container.
Taak: Schrijf het begin van de tellenLetters functie. Haal de input waarde op uit het element met de ID “txtLetter” en de tekst van de note.
// Schrijf het begin van de tellenLetters functie
const tellenLetters = () => {
// Haal de input en de note tekst op
let input = document.getElementById(“txtLetter”).value;
let note = document.getElementById(“note”).innerHTML;
// ... (de rest van de functie komt in de volgende flashcards) }
Flashcard 6: De tellenLetters functie - Deel 2 (Letter Tellen)
Beschrijving: Vervolg van de tellenLetters functie.
Taak: Schrijf de code die de letter in de note telt.
/ Letter tellen
let count = 0;
let index = note.indexOf(input);
while (index !== -1 && index < note.length) {
count++;
index = note.indexOf(input, index + 1);
}
Flashcard 8: Event Listener voor window.onload
Beschrijving: De setup functie moet worden aangeroepen zodra de pagina volledig is geladen.
Taak: Schrijf de code die de setup functie aanroept wanneer het window.onload event plaatsvindt.
// Schrijf de code om de setup functie aan te roepen bij het laden van de pagina
window.addEventListener(“load”, setup);
