finished

GitHubCard/index.js

@@ -1,9 +1,17 @@
+import axios from "axios";
 /*
   STEP 1: using axios, send a GET request to the following URL
     (replacing the placeholder with your Github name):
     https://api.github.com/users/<your name>
 */
-
+axios.get(`https://api.github.com/users/JackNunnink`)
+  .then(resp => {
+    console.log(resp);
+  })
+  .catch(err => {
+    console.error(err);
+  })
+  .finally(() => console.log("Done"))
 /*
   STEP 2: Inspect and study the data coming back, this is YOUR
     github info! You will need to understand the structure of this
@@ -28,7 +36,72 @@
     user, and adding that card to the DOM.
 */
 
-const followersArray = [];
+const followersArray = [
+  "tetondan",
+  "dustinmyers",
+  "justsml",
+  "luishrd",
+  "bigknell",
+  "crharding",
+  "JackNunnink"
+];
+
+for (let i = 0; i < followersArray.length; i++) {
+  getUsers(followersArray[i]);
+}
+
+function getUsers(username) {
+  axios.get(`https://api.github.com/users/${username}`)
+  .then(resp => {
+    document.querySelector(".cards").appendChild(userCardMaker(resp.data));
+  })
+  .catch(err => console.error(err));
+}
+
+
+function userCardMaker(userObj) {
+
+  const card = document.createElement("div");
+  const image = document.createElement("img");
+  const cardInfo = document.createElement("div");
+  const name = document.createElement("h3");
+  const username = document.createElement("p");
+  const userLocation = document.createElement("p");
+  const profile = document.createElement("p");
+  const profileLink = document.createElement("a");
+  const followers = document.createElement("p");
+  const following = document.createElement("p");
+  const bio = document.createElement("p");
+
+  card.appendChild(image);
+  card.appendChild(cardInfo);
+  cardInfo.appendChild(name);
+  cardInfo.appendChild(username);
+  cardInfo.appendChild(userLocation);
+  cardInfo.appendChild(profile);
+  profile.appendChild(profileLink);
+  cardInfo.appendChild(followers);
+  cardInfo.appendChild(following);
+  cardInfo.appendChild(bio);
+
+  image.src = userObj.avatar_url;
+  name.textContent = userObj.login;
+  username.textContent = userObj.login;
+  userLocation.textContent = userObj.location;
+  profile.textContent = "Profile";
+  profileLink.textContent = "Link to profile";
+  profileLink.href = userObj.html_url;
+  followers.textContent = `Followers: ${userObj.followers}`;
+  following.textContent = `Following: ${userObj.following}`;
+  bio.textContent = userObj.bio;
+
+  card.classList.add("card");
+  cardInfo.classList.add("card-info");
+  name.classList.add("name");
+  username.classList.add("username");
+
+  return card;
+}
 
 /*
   STEP 3: Create a function that accepts a single object as its only argument.
@@ -57,4 +130,5 @@ const followersArray = [];
     justsml
     luishrd
     bigknell
+    crharding
 */