Finished project

GitHubCard/index.js

@@ -1,9 +1,20 @@
+const cardElement = document.querySelector('.cards');
+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/Cobey388`)
+.then(resp => {
+  cardElement.appendChild(gitCard(resp.data))
+  console.log(resp);
+})
+.catch(error => {
+  console.log(error);
+})
 /*
   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 +39,15 @@
     user, and adding that card to the DOM.
 */
 
-const followersArray = [];
+const followersArray = ['tetondan', 'dustinmyers', 'luishrd', 'bigknell'];
+followersArray.forEach(element => {
+  axios.get(`https://api.github.com/users/${element}`)
+  .then(resp => {
+    cardElement.appendChild(gitCard(resp.data))
+  }).catch(err => {
+    console.error(err)
+  })
+})
 
 /*
   STEP 3: Create a function that accepts a single object as its only argument.
@@ -49,7 +68,6 @@ const followersArray = [];
       </div>
     </div>
 */
-
 /*
   List of LS Instructors Github username's:
     tetondan
@@ -58,3 +76,48 @@ const followersArray = [];
     luishrd
     bigknell
 */
+
+function gitCard(obj) {
+  const card = document.createElement('div');
+  const imgUser = document.createElement('img');
+  const cardInfo = document.createElement('div');
+  const name = document.createElement('h3');
+  const userName = document.createElement('p');
+  const location = 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.classList.add('card');
+  cardInfo.classList.add('card-info');
+  name.classList.add('name');
+  userName.classList.add('username');
+
+  imgUser.src = obj.avatar_url
+  name.textContent = obj.name
+  userName.textContent = obj.users_name
+  location.textContent = obj.users_location
+  profile.textContent = obj.address
+  profileLink.textContent = obj.html_url
+  followers.textContent = obj.followers
+  following.textContent = obj.following
+  bio.textContent = obj.bio
+
+  imgUser.setAttribute('src', obj.avatar_url)
+  profileLink.setAttribute('href', obj.url)
+  card.appendChild(imgUser);
+  card.appendChild(cardInfo);   
+  cardInfo.appendChild(name);
+  cardInfo.appendChild(userName);
+  cardInfo.appendChild(location);
+  cardInfo.appendChild(profile);
+  cardInfo.appendChild(followers);
+  cardInfo.appendChild(following);
+  cardInfo.appendChild(bio);
+  profile.appendChild(profileLink);
+
+  console.log(gitCard);
+  return card;
+}