Hello Express
Last updated
Last updated
Maak een nieuw project aan met de naam helloExpress en installeer express volgens de instructies in de theorie les.
We bouwen in deze oefening onze eerste express applicatie. Hier onder vind je een overzicht over alle routes die deze applicatie moet aanbieden en wat ze allemaal moeten doen.
In deze oefening gaan enkel HTML pagina's of json terugsturen.
http://localhost:3000
Zorg dat localhost:3000 een html pagina stuurt waarin je een header met de titel van jouw applicatie (kies zelf iets) met een kleine paragraaf die een beschrijving geeft.
http://localhost:3000/whoami & http://localhost:3000/whoamijson
Maak een globale variabele aan thisisme die een object bevat met 3 properties:
name
age
profilePic
De profilepic property bevat een url van een foto van jezelf. De foto moet je in de public folder zetten.
Zorg dat localhost:3000/whoami een HTML pagina toont met:
de zin "My name is XXX and I am YYY years old" met XXX en YYY de waarden van de properties van de thisisme variabel en
de foto uit profilePic
Zorg dat localhost:3000/whoamijson de inhoud van thisisme stuurt als JSON.
http://localhost:3000/pikachujson & http://localhost:3000/pikachuhtml
Doe een API call naar om de data van Pikachu op te halen en steek die in een globale variabel pikachu.
Zorg dat localhost:3000/pikachujson de data van pikachu als JSON terugstuurt
Zorg dat localhost:3000/pikachuhtml een mooie pikachu HTML pagina toont. Deze moet de volgende zaken zeker bevatten:
de naam
id
gewicht
een image van Pikachu's voorkant (zie sprites)
een image van Pikachu's achterkant (zie sprites)
http://localhost:3000/randomcolor
Deze route toont elke keer dat je deze pagina bezoekt een andere kleur.
Zoek zelf uit hoe je een willekeurige kleur kan berekenen. Probeer zelf eerst iets in elkaar te steken voor je begint te googlen hoe het moet.
Foutafhandeling
Zorg voor een eigen ontworpen 404 pagina die getoond wordt als de gebruiker een route probeert te bezoeken die niet bestaat.