Opdrachten

Let op! Het is niet toegestaan om AI-tools zoals ChatGPT te gebruiken. Voor deze opdrachten mag je de volgende bronnen gebruiken:

Makkelijke opdrachten (1 punt)

1. Hallo Wereld! (1 punt)

Maak een knop. Wanneer je op de knop klikt, verschijnt er een alert met de tekst "Hallo Wereld!". Gebruik addEventListener en alert().

2. Mijn Naam (1 punt)

Maak een tekstveld en een knop. Wanneer je op de knop klikt, verschijnt er een alert met de tekst die in het tekstveld staat. Gebruik document.getElementById() en value.

3. Kleur Kiezer (1 punt)

Maak een knop. Wanneer je op de knop klikt, verandert de achtergrondkleur van de pagina in rood. Gebruik style.backgroundColor.

4. Optelsom (1 punt)

Maak twee tekstvelden en een knop. Wanneer je op de knop klikt, worden de getallen in de tekstvelden opgeteld en het resultaat wordt getoond op de pagina. Gebruik parseInt() en innerHTML.

5. Lijstje Maken (1 punt)

Maak een tekstveld, een knop en een lege lijst (< ul >). Wanneer je op de knop klikt, wordt de tekst uit het tekstveld toegevoegd als een nieuw lijstitem (< li >). Gebruik createElement() en appendChild().

6. Verstopte Tekst (1 punt)

Maak een knop en een paragraaf met tekst. Wanneer je op de knop klikt, verdwijnt de tekst. Wanneer je nog een keer klikt, verschijnt de tekst weer. Gebruik style.display.

Gemiddelde opdrachten 2 punten

7. Kleurveranderaar (2 punten)

Maak een knop die, wanneer erop wordt geklikt, de achtergrondkleur van de pagina verandert in een willekeurige kleur. Gebruik hiervoor JavaScript om een willekeurige kleur te genereren en de style.backgroundColor van het < body >-element aan te passen.

8. Teller (2 punten)

Maak een knop en een paragraaf met het getal 0. Wanneer je op de knop klikt, gaat het getal omhoog met 1. Gebruik een variabele om het getal bij te houden en innerHTML om het te updaten.

9. Willekeurig Getal (2 punten)

Maak een knop. Wanneer je op de knop klikt, verschijnt er een willekeurig getal tussen 1 en 10 op de pagina. Gebruik Math.random() en innerHTML.

10. Afbeelding Veranderen (2 punten)

Plaats een afbeelding op de pagina en maak een knop. Wanneer je op de knop klikt, verandert de afbeelding in een andere afbeelding. Gebruik src om de afbeelding te veranderen.

Moeilijke opdrachten 4 punten

11. Rekenmachine (4 punten)

Maak een eenvoudige rekenmachine met twee invoervelden en een knop. Wanneer de gebruiker op de knop klikt, worden de twee getallen opgeteld en wordt het resultaat weergegeven op de pagina. Gebruik parseInt() of parseFloat() om de invoer om te zetten naar getallen.

12. Lijst met taken (4 punten)

Maak een eenvoudige takenlijst. De gebruiker kan een taak invoeren in een tekstveld en deze toevoegen aan een lijst door op een knop te klikken. Gebruik een < ul >-element om de taken weer te geven en een eventListener om de nieuwe taak toe te voegen.

13. Galgje (4 punten)

Maak een eenvoudige versie van Galgje. Kies een willekeurig woord uit een array en toon het aantal letters als streepjes. De gebruiker kan letters raden. Als de letter in het woord zit, wordt deze getoond. Als de letter er niet in zit, wordt een deel van het "galgje" getekend. Gebruik setInterval om de voortgang te controleren.

14. Stopwatch (4 punten)

Maak een stopwatch die start, pauzeert en reset met behulp van knoppen. Gebruik setInterval om de tijd bij te houden en clearInterval om de timer te pauzeren. Toon de tijd in seconden en milliseconden.