# Java Script Challenge

## DOM Challenge – Bouw jouw eigen mini-app

[datasource](https://www.roc.ovh/books/software-development-2025/page/java-script-challenge)

### **🎯** 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 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.

### ✅ 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 gebruikt 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 **bevestiging**: "Weet je zeker dat je item 'voorbeel' wilt verwijderen?"
- Je maakt tenminste gebruik van `querySelector`, `addEventListener`, en `innerHTML,` `classList.toggle()` en `remove()`

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

### 💡 Optioneel

- Als je alles in één pagina maakt, dan kan je er eventueel vrij eenvoudig een app voor je telefoon van maken.

### 🛠️ 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 (DOM)
6. Stijl je pagina met CSS zodat deze overzichtelijk en prettig in gebruik is.

#### 📋 Voorbeeld planning

```plaintext

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