Java Script Challenge

🎯 DOM Challenge – InteractieveBouw Boekenkastjouw 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 localStoragegebruikersinvoer, events en heteventueel verwerken van gebruikersinvoer.localStorage.
• Je leert een eenvoudige planning te maken voor je project.
• Je leert AI bewust inzetten en daarover verantwoording afleggen.

💡 Uitleg

JeIn werktdeze bijles eenontwerp uitgeverij.je Ze willen een interactieve webpagina waarop bezoekers hun favoriete boeken kunnen opslaan, bekijken en beheren. Jij gaatzelf een kleine webappinteractieve bouwenDOM-app. waarinJe gebruikerspast boekende kunnentechnieken toevoegen,toe bekijken,uit afvinkende alsvorige gelezen,lessen. verwijderenKies enéén zoeken.van de volgende apps, of verzin een eigen variant:

MogelijkhedenMogelijke van je webapp:projecten:

• BoekenTodo-lijst: toevoegengebruiker (titelvoert +een schrijver)
taak
• Boekenin, kan deze toevoegen, afvinken als gelezen (class toggle)
,
• Boekenen verwijderen (event.target.remove()).
• BoekenQuiz: 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 (live filter)
• Boekené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 (blijften bewaardeen bijlive herladen) zoekveld.

🛠️ Opdracht – BouwKies jeen eigenbouw boekenkastjouw mini-app

1. Maak een nieuw HTML-bestand met deeen naamduidelijke naam, bijv. boekenkast.dom-project.html.
2. VoegKies eenwelk invoerformulierklein toeDOM-project metje veldenmaakt voor(zie titel en schrijver, en een knop “Voeg toe”hierboven).
3. LaatMaak deeen boekenplanning verschijnenvan je project in een lijst.tabel Elke(zie rijvoorbeeld bevat:
   • De titel en schrijverhieronder).
   • EenWerk knopstap “✔voor gelezen”stap: (togglebegin classmet gelezen)
   HTML,
   • Eenvoeg knopdaarna “🗑JavaScript verwijder”
   toe.
4. Gebruik technieken uit eerdere lessen zoals localStoragequerySelector, om de lijst te bewarenaddEventListener, en opnieuw te laden bij het openen van de pagina.innerHTML.
5. VoegStijl bovenaanje eenpagina zoekveldmet toeCSS waarmeezodat dedeze gebruikeroverzichtelijk live kan filteren op titel of schrijver.is.

Bonus:

📋 voegVoorbeeld 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

Voorbeeldplanning

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

🧠 Reflectie

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

📤 Inleveren

• Lever je boekenkast.dom-project.html inin, (zetsamen de <style>sectie enmet je codeCSS-bestand de(indien <code> sectie)apart).
• Lever je planning in (als .txt of .pdf)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.
• Lever je reflectie in als .txt of .pdf.
• Bonus:Eventueel: voeg een screenshotscreenshots toe van je werkende webapp.webapp als je trots bent op het resultaat!