7. Vite
7. Vite
In deze oefeningenreeks oefen je op:
- Het gebruik van Typescript
- Herhaling DOM en Fetch
Voor deze oefeningen zijn startbestanden voorzien, je vindt deze op GitPub.
Startbestanden
Oefening 1
De pagina 'fetch.html' komt uit de voorbeelden van H5. Zet deze om naar een typescript project door:
- Een nieuw Vite project aan te maken op de correcte manier
- De folderstructuur te voorzien zoals aangeleerd in les 6
- Een model aan te maken voor 'Post' (interface)
- Voer de fetch request uit in een browser om te zien welke velden je moet voorzien.
- Bootstrap te importeren zoals aangeleerd in les 6 in plaats van op de oude manier
- De code om te zetten naar de structuur aangeleerd in les 6
Oefening 2
Schrijf een webpagina die een willekeurige foto toont wanneer je op de knop "Random foto" drukt. In de map img vind je 9 afbeeldingen die je kan gebruiken.
Zorg ervoor dat dezelfde afbeelding niet twee keer na elkaar zichtbaar is. Om dit te controleren, toon je een log van de foto's in een div onder de knop. Hierin staat steeds wat de vorige waarde was en de nieuwe random waarde die je gegenereerd hebt. Zoals je in onderstaand voorbeeld kunt zien, was de vorige waarde 1 en moeten we steeds opnieuw random waarden blijven genereren totdat de nieuwe waarde (3) verschillend is van de vorige waarde (1).
Deze oefening is een variant op oefening 2 van les 4.
Maak gebruik van de Vite project in typescript. Maak voor de afbeeldingen een type alias aan met een tuple, met als eerste element de index en als 2de element de bestandsnaam.
Oefening 3
Schrijf een app die gebruik maakt van een API om een trivia quiz te maken. Je houdt het simpel en hergebruikt steeds 1 pagina om de vragen, score, en het eindtotaal te tonen.
Gebruik onderstaande API om quizvragen te genereren. Gebruik minstens een model om de vraag in op te vangen. Gebruik type aliases voor het type van de vraag en de moeilijkheidsgraad.
