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!