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: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.

✅ Eisen

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

  • Een of meer invoervelden + knoppen
  • Een lijst of reeks elementen die via JavaScript groeit
  • Een invoerveld met een search functie waarbij als je die gebnuikt alleen de gezochte items worden getoond.
  • Na een search moet je ook weer terug gaan en alle elementen kunnen laten zien.
  • Event-handling (bijv. click, submit)
  • Bij een delete van een item, vraag je om eerst om bevesting: "Weet je zeker dat je item 'voorbeel' wilt verijdern?"
  • Je maakt ten,instetenminste gebruik van querySelector, addEventListener, en innerHTML, classList.toggle() en remove()

Bij het project Boekenkast moet je daarnaast ook werken met localStorage.

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

  1. Maak een bestand met een duidelijke naam, bijv. dom-project.html.
  2. Kies welk 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.(DOM)
  6. Stijl je pagina met CSS zodat deze overzichtelijk en prettig in gebruik 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!
  • Je laat het resultaat aan de docent zien en je kan de code uitleggen.
Back to top