Deze squadpage biedt een overzicht van alle studenten en squads van de opleiding Frontend Design & Development van het cohort 2022. Binnen de pagina kan de gebruiker linken naar de website van studenten per squad. Bonus: de gebruike kan een drankje uitkiezen die het apparaat laat maken.
De opmaak van de website is nu dynamisch opgemaakt dankzij de Javascript template EJS (Embedded Javascript). Deze tool laadt de html in vanuit onafhankelijke ejs-bestanden en zet het totaal om in html dat uiteindelijk te zien is in de browser.
Dit is het index.ejs bestand
<%- include('./partials/head.ejs') %>
<body>
<%- include('./partials/nav.ejs') %>
<main>
<section>
<%- include('./partials/page-title.ejs') %>
<%- include('./partials/coffee-machine.ejs') %>
</section>
<section>
<%- include('./partials/squad-members.ejs') %>
</section>
</main>
<%- include('./partials/foot.ejs') %>CSS is gebruikt om de layout, animaties en identiteit van de site te regelen. Omdat CSS een client-side taal is het te vinden in de map ./public.
In dit bestand is gebruik gemaakt van custom-properties:
:root {
/* Animations */
--a-quick: 0.2s;
--a-default: 0.3s;
--a-medium: 0.6s;
/* Colors */
--c-default: #fafafa;
--c-invert: #121212;
--c-primary-0: #f0f2f4;
--c-primary-25: #9bb3df;
--c-primary-50: #647fb3;
--c-primary-75: #294d90;
--c-primary-100: #2e3f5f;
--c-secundary-0: #e17878;
--c-secundary-50: #bf3c3c;
--c-secundary-100: #8b5a5a;
--c-tertiary-50: #7d593b;
--c-tea: #e7e2596a;
--c-water: #82c0db;
/* Layout */
--w-dix: 10vw;
--w-quarter: 25vw;
--w-third: 33vw;
--w-half: 50vw;
--w-full: 100vw;
--h-full: 100vh;
/* Units */
--u-nano: 0.1em;
--u-micro: 0.25em;
--u-small: 0.375em;
--u-medium: 0.5em;
--u-default: 1em;
--u-large: 2em;
--u-round: 50%;
}Javascript is net als de css te vinden in de ./public map.
Deze Javascript is ook client-side en bevat voornamelijk de instellingen voor de animatie van het koffiezetapparaat.
Hieronder staan de instellingen die de geluidseffecten inlaad.
const coffeeAudio = [
new Audio('https://nichtrijder.pepijnblom.com/sounds/krijg%20nou%20een%20bakkie%20pleur.mp3'),
new Audio('./assets/audio/de-eerste-indruk-is-romig.mp3')
];
const teaAudio = new Audio('./assets/audio/cup-of-tea.m4a')
const waterAudio = new Audio('./assets/audio/water.m4a')
const liquid = document.querySelector('.liquid')
const dispenser = ['.left-dispenser-output', '.right-dispenser-output']Node (officieel NodeJS ) organiseert de Javascript op de server. Het biedt de mogelijkheid om te communiceren tussen de API mijn website d.m.v HTTP request en responses.
Hieronder staat een voorbeeld hoe de squads worden opgehaald uit de API.
// Haalt alle squads op uit de API en wacht voordat voorgaande commando's zijn uitgevoerd
await getSquads()
.then((response) => squads = response)
// Filter uit de squads
squads = squads.filter((item) => item.slug.startsWith('squa'))
if (!id) id = squads[2].id
if (!direction) direction = 'ASC'
await getSquad({ id, orderBy: 'surname', direction })
.then((response) => squad = response)
response.render('index', { squads, squad, members: squad.members })
})Express is het framework dat de routing regelt waar de data vandaan kan worden gehaald.
Hieronder staat een voorbeeld hoe express wordt geïmporteerd in node uit de node_modules mappenstructuur:
import express from 'express'
[...]
// Creëert een nieuwe express app
const app = express()
// Configureert hoe ik Express kan gebruiken
app.set('view engine', 'ejs')
app.set('views', './views')
app.use(express.static('public'))Voor dit project heb ik Node geinstalleerd en met behulp van de terminal binnen Visual Studio Code geactiveerd met het commando npm init. Zo wordt de node omgeving geïnitialiseerd. Zodra dat gelukt is kan npm install worden uitgevoerd. Tot slot wanneer er aanpassen zijn gemaakt op nieuwe regels code zijn gemaakt kan met behulp van npm start het resultaat worden weergegeven in de browser. Wanneer de server gesloten moet worden, of opnieuw worden opgestart, kan met de sneltoets control + c / ^c op mac.
Om deze repository te gebruiken volg dan de volgende stappen:
- Installeer de recenste versie van Node via deze [link](https://nodejs.org/en/)
- Open de repository met Github Desktop en clone vervolgens de leertaak
- Open in Visual Code Studio de terminal en voer het commando `npm install` uit.
- Type daarna het commando `npm start`.
- Zodra het commando is uitgevoerd kan via de ontvangen link de website worden weergegeven in de browser. Standaard heet deze localhost:8000.
- Om de site live te zetten kan je gebruik maken van de Cyclic webhosting.
- Log in met je Github en koppel de repository.
- Ontvang vervolgens de gegenereerde, willekeurige URL van Cyclic.
- Upload en fetch tot slot de site met Github Desktop.
https://foolishdeveloper.com/how-to-play-sound-on-click-using-javascript/
https://nichtrijder.pepijnblom.com/
This work is licensed under GNU GPLv3.