Skip to main content

Java Script Challenge

đŸŽ¯ DOM Challenge – Bouw jouw eigen mini-app

đŸŽ¯ Leerdoelen

  • Je past alle basisvaardigheden toe rondom DOM-manipulatie.
  • Je maakt een interactieve webapp met HTML, CSS en JavaScript.
  • Je leert werken met gebruikersinvoer, events en eventueel localStorage.
  • Je leert een eenvoudige planning te maken voor je project.
  • Je leert AI bewust inzetten en daarover verantwoording afleggen.

💡 Uitleg

In deze les ontwerp je zelf een kleine interactieve DOM-app. Je past de technieken toe uit de vorige lessen. Kies ÊÊn van de volgende apps, of verzin een eigen variant:

Mogelijke projecten:

  • Todo-lijst: gebruiker voert een taak in, kan deze toevoegen, afvinken (class toggle), en verwijderen (event.target.remove()).
  • Quiz: gebruiker kiest een antwoord en krijgt direct feedback.
  • Poll/stemming: klik op een optie, zie het aantal stemmen stijgen.
  • Chatbox: gebruikersberichtjes invoeren die onder elkaar verschijnen.
  • Boekenkast: boeken toevoegen, afvinken als gelezen, verwijderen, zoeken Ên opslaan in localStorage.

Let op: Bij elk project gebruik je minimaal deze onderdelen:

  • Een invoerveld + knop
  • Een lijst of reeks elementen die via JavaScript groeit
  • Event-handling (bijv. click, submit)
  • classList.toggle() of remove()

Bij het project Boekenkast moet je daarnaast ook werken met localStorage en een live zoekveld.

🛠ī¸ Opdracht – Kies en bouw jouw mini-app

  1. Maak een bestand met een duidelijke naam, bijv. dom-project.html.
  2. Kies welk klein DOM-project je maakt (zie hierboven).
  3. Maak een planning van je project in een tabel (zie voorbeeld hieronder).
  4. Werk stap voor stap: begin met HTML, voeg daarna JavaScript toe.
  5. Gebruik technieken uit eerdere lessen zoals querySelector, addEventListener, en innerHTML.
  6. Stijl je pagina met CSS zodat deze overzichtelijk is.

📋 Voorbeeld planning


| Onderdeel                  | Tijd | Status |
|---------------------------|------|--------|
| HTML structuur            | 20m  |        |
| JS: items toevoegen       | 30m  |        |
| JS: verwijderen/afvinken  | 20m  |        |
| Styling                   | 15m  |        |
| Reflectie schrijven       | 15m  |        |

🧠 Reflectie

  • Wat vond je het makkelijkst en het moeilijkst?
  • Welke technieken heb je toegepast? Noem er minstens drie.
  • Waar heb je AI voor gebruikt?
  • Wat zou je in de toekomst nog willen verbeteren of leren?

📤 Inleveren

  • Lever je dom-project.html in, samen met je CSS-bestand (indien apart).
  • Lever je planning in als .txt of .pdf.
  • Lever je reflectie in als .txt of .pdf.
  • Lever je AI-logboek in: geef aan welke prompts je gebruikte, wat je codeerde met hulp van AI, en wat je zelf schreef of aanpaste.
  • Eventueel: voeg screenshots toe van je werkende webapp als je trots bent op het resultaat!
Back to top