Voorbeeldexamen
Voorbeeldexamen
Tijdens dit examen bouw je een pagina waarop je overzicht kan raadplegen van de verschillende festivals die in 2024 doorgaan.
Je wordt niet beoordeeld op de opmaak (lay-out) van je code. Als deze niet 100% overeenkomt met de screenshots is dit dus geen probleem. Je wordt enkel beoordeeld op de functionaliteit.
Maak doorheen het volledige examen gebruik van TypeScript, zorg ervoor dat de volledige applicatie strongly typed is (1 punt).
Startbestanden
Pagina's & componenten (2 punten)
De startbestanden bevatten twee pagina's en drie custom elementen. Zorg ervoor dat de pagina's bereikbaar zijn op '/' en '/favorieten'.
Zorg er verder ook voor dat de custom elements geregistreerd worden, voor de navbar gebruik je de naam custom-navbar, voor de andere elementen kan je zelf een naam kiezen.
Festivals pagina
Festivals inladen (1 punten)
Laad de festivals in via een fetch-functie en toon de inhoud op de festivals (home) pagina. Je gebruikt hier geen PersistenceProvider voor, maar schrijft zelf een nieuwe fetch functie die het resultaat bewaard in een instantievariabele (property) in de FestivalPage klasse.
De festivals kunnen ingeladen worden uit de API, die na een bun install; bun dev op poort 3000 draait. De URL voor de festivals is http://localhost:3000/tickets.
Festivals renderen (4 punten)
De ingeladen festivals moeten toegevoegd worden aan de HTML-pagina.
Om de festivals te renderen maak je gebruik van het ticketcard custom-element, waarvoor je de opmaak in de startbestanden vindt.
Favorieten
Gebruikers kunnen een festival selecteren en dit toevoegen aan hun favorieten. De favoriete festivals worden bewaard via het http://localhost:3000/favorites endpoint van de API. Hierop zijn alle CRUD endpoints beschikbaar, je beheerd deze data via de RestPersistenceProvider die je in de startbestanden vindt.
Favorieten toevoegen (4 punten)
Via de '+' knop in de ticketcard component kan de gebruiker een festival toevoegen aan de favorieten. Gebruik een custom event om een festival toe te voegen aan de favorieten. Hiervoor kan je de volledige inhoud van het ticket object naar het CREATE /favorites endpoint sturen. Om een favoriet terug te verwijderen gebruik je het DELETE /favorites/{id} endpoint.
Een favoriet ticket wordt aangeduid via een groene knop met een vinkje, hiervoor gebruik je de Bootstrap klasse 'btn-success' en de HTML-entity ✓ (âś“). Als je op deze knop drukt wordt de knop terug een '+' en wordt het festival verwijderd uit de favorieten.
Festivals filteren (3 punten)
Bovenaan de festivals pagina zijn een tekst input element en een select beschikbaar waarmee de festivals gefilterd kunnen worden.
Zorg ervoor dat de gebruiker de festivals kan filteren op naam, op type of op allebei samen. De resultaten worden gefilterd zodra de gebruiker op de knop "filter resultaten" drukt. Voor de naam input moet gezocht worden naar een substring in de titel van het album en dit case-insensitive gebeuren.
Favorieten renderen (3 punten)
Gebruik het favoriteItem custom element, waarvoor je de opmaak in de startbestanden vindt, om de /favorites pagina op te bouwen.
Onderaan de pagina moet de totaalprijs voor de tickets van alle favorieten getoond worden.
Favorieten verwijderen (2 punten)
Via de 'X' knop in de favoriteItem component kan de gebruiker een festival verwijderen uit de favorieten, als het festival hier verwijderd wordt, moet het natuurlijk ook verdwijnen op de homepagina.