Java Script Challenge

🎯 DOM Challenge – Interactieve Boekenkast

🎯 Leerdoelen

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

💡 Uitleg

Je werkt bij een uitgeverij. Ze willen een interactieve webpagina waarop bezoekers hun favoriete boeken kunnen opslaan, bekijken en beheren. Jij gaat een kleine webapp bouwen waarin gebruikers boeken kunnen toevoegen, bekijken, afvinken als gelezen, verwijderen en zoeken.

Mogelijkheden van je webapp:

• Boeken toevoegen (titel + schrijver)
• Boeken afvinken als gelezen (class toggle)
• Boeken verwijderen (event.target.remove())
• Boeken zoeken (live filter)
• Boeken opslaan in localStorage (blijft bewaard bij herladen)

🛠️ Opdracht – Bouw je eigen boekenkast

1. Maak een nieuw HTML-bestand met de naam boekenkast.html.
2. Voeg een invoerformulier toe met velden voor titel en schrijver, en een knop “Voeg toe”.
3. Laat de boeken verschijnen in een lijst. Elke rij bevat:
   • De titel en schrijver
   • Een knop “✔ gelezen” (toggle class gelezen)
   • Een knop “🗑 verwijder”
4. Gebruik localStorage om de lijst te bewaren en opnieuw te laden bij het openen van de pagina.
5. Voeg bovenaan een zoekveld toe waarmee de gebruiker live kan filteren op titel of schrijver.

Bonus: voeg een knop toe om alles te wissen (met localStorage.clear()).

🗓️ Planning maken

Maak vóórdat je begint een planning. Zet hierin:

• Welke onderdelen je gaat bouwen (bijv. HTML-formulier, toevoegen, verwijderen...)
• In welke volgorde je daaraan werkt
• Een schatting van hoeveel tijd je per onderdeel nodig hebt

Voorbeeld

| Onderdeel                  | Tijd | Status |
|---------------------------|------|--------|
| HTML structuur            | 20m  |        |
| JS: boeken toevoegen      | 30m  |        |
| .....                     | .... |        |
| ......                    | .... |        |
etc. etc.

🧠 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 boekenkast.html in (zet de <style>sectie en je code de <code> sectie).
• Lever je planning in (.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.
• Lever je reflectie in als .txt of .pdf.
• Bonus: voeg een screenshot toe van je werkende webapp.