Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md
Bezoek de GitHub en persoonlijke website van alle FDND studenten en docenten per squad.
Met de squadpage kan je per squad alle members inzien. Een member heeft een eigen kaartje met daarin een avatar, GitHub link en persoonlijke link. Ook is het mogelijk om een squad te sorteren op naam A-Z of naam Z-A.
https://distinct-clam-sweatshirt.cyclic.app/
De FDND Squad page is gemaakt met Node.js, EJS en Express. De dynamische data van de members en squads worden uit de WHOISAPI gehaald.
Node is een zogehete JavaScript-runtime-omgeving. Dit betekent dat je met Node, niet vast zit aan client-side JavaScript. Met Node kan je een back-end opzetten en hiermee server-side JavaScript inzetten. Dit is betrouwbaarder en vooral voorspelbaarder dan wanneer je voor ieder verschillende browser, apparaat, verbinding, enz.. moet afstemmen. Daarnaast is server-side JavaScript (meestal) veel sneller, omdat deze code op een externe server wordt uitgevoerd.
EJS is een template framework waarmee je gebruikelijke JavaScript inline op de back-end kan laten uitvoeren. Dit maakt bijvoorbeeld een forEach loop mogelijk tussen de HTML code, zodat je templates kan vullen met data uit het framework.
Express brengt deze onderdelen samen en heeft ook functies als routing. Ook maakt Express het mogelijk om RESTful API's te bouwen en gebruiken met Node JS.
Fork het project en voer eerst npm install uit in de terminal om alle nodige packages en dependencies binnen te halen. Vervolgens maakt npm start een port vrij om de website te bekijken in de browser.
Bezoek de FDND Squad page via de volgende link: https://distinct-clam-sweatshirt.cyclic.app/ . De standaard geselecteerde squad is Squad B, aangezien ik ook in deze squad zit.
Om een andere Squad te kunnen inzien, selecteer je links in de navigatie balk een andere Squad naam, zoals "Squad C".
Vervolgens kun je nog sorteren op naam. Klik rechts in de navigatie balk op het selectie blokje naast "Sorteren op: ". Selecteer "naam A-Z" om de members op alfabetische volgorde te sorteren of op "naam Z-A" voor het omgekeerde. De pagina ververst zichzelf en toont de aangevraagde sortering.
Als laatste kan je het GitHub profiel of persoonlijke link openen van een member, door op de bijbehorende ronde icoontjes te klikken.
This work is licensed under GNU GPLv3.