Data gebruikt ipv statisch html

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Open index.html",
+            "file": "/Users/stephankok/Documents/School/api-voor-beginners/index.html"
+        }
+    ]
+}

index.html

@@ -12,34 +12,11 @@
 
   <section>
     <h1>jouw naam zo hier</h1>
+    <h2></h2>
   </section>
 
   <section>
     <h2>Iedereen</h2>
-
-    <article>
-      <h3>Krijn Hoetmer</h3>
-      <img src="images/placeholder1.svg" alt="Krijn Hoetmer">
-      <a href="https://krijnhoetmer.nl" aria-label="de website van Krijn Hoetmer">website</a>
-    </article>
-
-    <article>
-      <h3>Sanne 't Hooft</h3>
-      <img src="images/placeholder2.svg" alt="Sanne 't Hooft">
-      <a href="https://sinds1971.nl" aria-label="de website van Sanne 't Hooft">website</a>
-    </article>
-
-    <article>
-      <h3>Vasilis van Gemert</h3>
-      <img src="images/placeholder3.svg" alt="Vasilis van Gemert">
-      <a href="https://vasilis.nl" aria-label="de website van Vasilis van Gemert">website</a>
-    </article>
-
-    <article>
-      <h3>Cyd Stumpel</h3>
-      <img src="images/placeholder4.svg" alt="Cyd Stumpel">
-      <a href="https://cydstumpel.nl" aria-label="de website van Cyd Stumpel">website</a>
-    </article>
   </section>
 
   <script src="scripts/myName.js"></script>

scripts/everybody.js

@@ -5,10 +5,35 @@ const endpointSquad = 'items/person/?filter={"squads":{"squad_id":15}}';
 
 
 
-
-
-
-
+const everybodyURL = baseURL + endpointSquad;
+
+getData(everybodyURL).then(data => {
+    const allPeople = data.data;
+    let everybodysection = document.querySelector("section:nth-of-type(2)");
+
+    allPeople.forEach(person => {
+        let personName = person.name;
+        let personAvatar = person.avatar;
+        let personWebsite = person.website;
+
+        if (!personAvatar){
+            let randomNr = Math.floor(Math.random() * 5) + 1;
+            personAvatar = `images/placeholder${randomNr}.svg`;
+        }
+
+        if (!personWebsite){
+            personWebsite = fallbackWebsite;
+        }
+
+        let personHTML = `<article>
+        <h3>${personName}</h3>
+        <img src="${personAvatar}" alt="${personName}">
+        <a href="${personWebsite}" aria-label="de website van ${personName}">website</a>
+        </article>`;
+
+        everybodysection.insertAdjacentHTML('beforeend', personHTML);
+    });
+})
 
 
 

scripts/myImage.js

@@ -1,8 +1,26 @@
+const mySection = document.querySelector('section:nth-of-type(1)');
 
 
 
+getData(myURL).then( data219 => {
 
+    const myData = data219.data;
+    let myAvatar = myData.avatar;
+    let myName = myData.name;
 
+    if (!myAvatar){
+        myAvatar = "images/placeholder1.svg";
+    }
+
+    const myImg = document.createElement("img");
+
+
+    myImg.src = myAvatar;
+    myImg.alt = myName + "'s Avatar"
+
+    mySection.append(myImg);
+    console.log(myImg);
+})
 
 
 

scripts/myName.js

@@ -4,12 +4,31 @@
 // iedereen: https://fdnd.directus.app/items/person/?fields=id,name,github_handle,avatar&filter={%22squads%22:{%22squad_id%22:{%22name%22:%22Minor%20Web%20Dev%22}}}&sort=name
 
 const baseURL = 'https://fdnd.directus.app/';
-const endpointMe = 'items/person/67';
+const endpointMe = 'items/person/219';
 
+//Get complete url from the data you want
+const myURL = baseURL + endpointMe;
 
+console.log(myURL);
 
+//Call function " getData" for the data you need
+getData(myURL).then( data219 => {
 
+	//Fill wanted data in variables
+	let myName = data219.data.name;
+	let myBirthday = data219.data.birthdate;
+
+	//Find the needed sections in the html code
+	let mainH1 = document.querySelector("h1");
+	let subline = document.querySelector("h2");
 
+	//Fill the h1 with the given name
+	mainH1.textContent = myName;
+	subline.textContent = myBirthday;
+
+
+	console.log(data219.data);
+} );