Bouwen 🏗️
Ik wilde 2 verschillende sections maken in mijn nav. Dit omdat er een deel links begon in het menu, en een deel rechts. Zoals hier:
Er word een afbeelding geladen. Deze word geladen door img src="/<%=squad.slug%>.jpg" class="headerfoto". De squad namen van de header images (van de squads) zijn vernoemd naar de squad slug en eindigen allemaal met jpg. Zo zijn ze dus vanuit de data-naam te laden.
<%= squad.name %> De squad name word geladen in de titel van de desbetreffende squad.
De buttons naar de squads zijn opgebouwd uit 3 verschillende a href's: a href="/?squad=squad-a-2022" met achter de "?squad=" alle 3 hun eigen slug. De button van de kijklijst heeft geen link, omdat daar geen pagina voor is gemaakt.
Je kunt de squadleden sorteren op voornaam met de volgende code: a href="/?squad=<%= squad.slug %>&orderBy=name" class="order-by-name" >Sorteer op voornaam /a De passende squad word opgevraagd aan de hand van de squad slug, en met de &orderBy=name word er op voornaam gesorteerd.
De squadleden worden geladen met squad.members.forEach. De methode forEach() roept een functie aan voor elk element binnen het stuk.
De website van de student word uit de whois.fdnd API gehaald met member.website.
Als er een foto(avatar) word gevonden (met member.avatar), laat deze dan zien. En als deze niet bestaat, laat dan de foto van een puppy zien (src="/puppy.png"). Bekijk de code hier.
De informatie van de student komt onder de avatar te staan. (voornaam, prefix en achteraam). Dit is gedaan met member.name, member.prefix en member surname.
De section van de dramaseries is op dezelfde manier opgebouwd, alleen heeft het een andere titel.
Copyright is toegevoegd
Dit is hoe ik de slider heb opgezet in mijn ejs-bestand. Ik heb de class van de slider van de komedieseries opgezet met display: grid, grid-auto-flow: column, grid-auto-columns: 16%, overflow-x: auto, overscroll-behavior-inline: contain. Display: grid, om aan te geven dat je in een grid wilt werken. Grid-auto-flow: column om alles in kolommen te zetten in plaats van rijen. Grid-auto-columns: 16%, dit geeft aan dat elke kolom 16% breed is. Overflow-x: auto zorgt ervoor dat je alleen dat stukje kunt scrollen, en niet de hele pagina. Overscroll-behavior-inline: contain, om alleen dit element te kunnen laten scrollen.