Developen

Ik wist eigenlijk meteen na het ontwerpen, hoe ik wou gaan beginnen met coderen. Ik ging er eerst voor zorgen dat de sidenav als een partial in de view map kwam, zodat ik het gemakkelijk op elke pagina kon gaan plaatsen die ik ging maken in het project. Vanaf hier ben ik eigenlijk gewoon verder gaan werken. De meeste styling heb ik gedaan met grid omdat ik dit gemakkelijk vind werken en super handig is om alles responsive te maken als je met meerdere column layout werkt.

.playlists__list ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

Data ophalen voor een squad page

Om te zorgen dat ik alle data krijg van de members/studenten in bepaalde squads heb ik onderstaande code gebruikt.

const urlA = 'https://whois.fdnd.nl/api/v1/squad/squad-a-2022'
const dataA = await fetch(urlA)
  .then((response) => response.json())
  .catch((error) => error)

Met code zorg ik ervoor dat ik eerst een URL aangeef en vervolgens een variabele data aanmaak waarin de URL met alle data wordt gefetched, the await zorgt er voor dat eerst alles wordt ingeladen/opgehaald voordat het wordt omgezet naar JSON in mijn code.

Filter code

Om te kunnen filteren moest ik de code iets aanpassen, ik moest er namelijk voor zorgen dat wanneer je op een bepaalde link in de html klikt, je dan wel de goede link ophaalt, zo heb ik de squadUrl in plaats van alleen de API link te laten ook de squad slug, en orderBy gegeven met de ASC direction. Dit zorgt er dus voor dat wanneer je op de juiste links klikt op de website je niet alleen naar /squadA gaat maar naar /squadA/squad-a-2022&orderBy=name&direction=ASC

app.get('/squadA', function (req, res) {

  let slug = req.query.squad || 'squad-a-2022'
  let orderBy = req.query.orderBy || 'name' + '&direction=ASC'
  let squadUrl = urlA + '?orderBy=' + orderBy + '&direction=ASC'

  fetchJson(squadUrl).then((dataA) => {
    res.render('squadA', dataA)
  })
})