Jalal

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

.prettierignore

@@ -0,0 +1 @@
+views/partials

README.md

@@ -1,32 +1,38 @@
-> _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](docs/INSTRUCTIONS.md)
+# Squadpage "Twitter feed" Squad C
+
+![image](https://user-images.githubusercontent.com/112856292/220222036-b5a55526-afbc-4cd6-a052-89d5a38a8c4d.png)
 
-# Titel
-<!-- Geef je project een titel en schrijf in één zin wat het is -->
 
 ## Inhoudsopgave
 
-  * [Beschrijving](#beschrijving)
-  * [Kenmerken](#kenmerken)
-  * [Installatie](#installatie)
-  * [Gebruik](#gebruik)
-  * [Bronnen](#bronnen)
-  * [Licentie](#licentie)
+- [Beschrijving](#beschrijving)
+- [Kenmerken](#kenmerken)
+- [Installatie](#installatie)
+- [Gebruik](#gebruik)
+- [Bronnen](#bronnen)
+- [Licentie](#licentie)
 
 ## Beschrijving
-<!-- In de Beschrijving staat hoe je project er uit ziet, hoe het werkt en wat je er mee kan. -->
-<!-- Voeg een mooie poster visual toe 📸 -->
-<!-- Voeg een link toe naar Github Pages 🌐-->
+
+Een live-coded voorbeeld van een overzichtspagina gemaakt met Express.js en EJS, welke gebruik maakt van configuratie in een `.env` bestand.
 
 ## Kenmerken
-<!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met Javascript gedaan en hoe? Misschien heb je een framwork of library gebruikt? -->
 
 ## Installatie
-<!-- Bij Installatie staat stap-voor-stap beschreven hoe je de development omgeving moet inrichten om aan de repository te kunnen werken. -->
+
+1. Fork en clone de code
+2. Voer npm install uit in de projectmap
+3. Voer npm start uit en open het voorbeeld in je browser
 
 ## Gebruik
 
 ## Bronnen
 
+https://expressjs.com/en/4x/api.html
+https://ejs.co/
+https://www.npmjs.com/package/dotenv
+https://whois.fdnd.nl/docs/squad#slug
+
 ## Licentie
 
 ![GNU GPL V3](https://www.gnu.org/graphics/gplv3-127x51.png)

index.js

@@ -0,0 +1,63 @@
+// Importeer express uit de node_modules map
+import express from "express"; // express zorgt ervoor dat  de route van je website defineerd wordt
+
+// De URL wordt gebruikt om informatie op te halen van de API
+const url = "https://whois.fdnd.nl/api/v1/squad/squat-c-2022";
+// Fetch gegevens op van de opgegeven URL, parsed deze als JSON en wijst het resultaat toe aan de variabele "data".
+const data = await fetch(url)
+  .then((response) => response.json())
+  .catch((error) => error);
+
+console.log(data.members);
+
+// Maak een nieuwe express app
+const app = express();
+
+// Stel in hoe we express gebruiken
+app.set("view engine", "ejs");
+app.set("views", "./views");
+
+// Gebruik de map 'public' voor statische resources
+app.use(express.static("public"));
+
+// Dummy data filter on the option in the parameter
+const ambitions = [
+  "Frontend engineer",
+  "HTML/CSS developer",
+  "Frontend webdesigner",
+  "Not yet defined",
+  "TheWizard",
+  "TheEnthusiast",
+  "TheInventer",
+  "TheMashUp",
+];
+data.squad.members.forEach(function (member) {
+  if (!member.ambition) {
+    // Pak een random ambition en zet deze in de member
+    member.ambition = ambitions[Math.floor(Math.random() * ambitions.length)];
+  }
+});
+// console.log(data.squad.members)
+
+// Maak een route voor de index
+app.get("/", function (req, res) {
+  // res.send('Hello World!')
+
+  const filtered = structuredClone(data);
+
+  if (req.query.ambition) {
+    filtered.squad.members = filtered.squad.members.filter(
+      (member) => member.ambition == req.query.ambition
+    );
+  }
+  res.render("index", filtered);
+});
+
+// Stel het poortnummer in waar express op gaat luisteren
+app.set("port", process.env.PORT || 8000);
+
+// Start express op, haal het ingestelde poortnummer op
+app.listen(app.get("port"), function () {
+  // Toon een bericht in de console en geef het poortnummer door
+  console.log(`Application started on http://localhost:${app.get("port")}`);
+});