Github UserCard Done

GitHubCard/index.js

@@ -1,55 +1,69 @@
-/* Step 1: using axios, send a GET request to the following URL 
-           (replacing the palceholder with your Github name):
-           https://api.github.com/users/<your name>
-*/
-
-/* Step 2: Inspect and study the data coming back, this is YOUR 
-   github info! You will need to understand the structure of this 
-   data in order to use it to build your component function 
-
-   Skip to Step 3.
-*/
-
-/* Step 4: Pass the data received from Github into your function, 
-           create a new component and add it to the DOM as a child of .cards
-*/
-
-/* Step 5: Now that you have your own card getting added to the DOM, either 
-          follow this link in your browser https://api.github.com/users/<Your github name>/followers 
-          , manually find some other users' github handles, or use the list found 
-          at the bottom of the page. Get at least 5 different Github usernames and add them as
-          Individual strings to the friendsArray below.
-
-          Using that array, iterate over it, requesting data for each user, creating a new card for each
-          user, and adding that card to the DOM.
-*/
-
-const followersArray = [];
-
-/* Step 3: Create a function that accepts a single object as its only argument,
-          Using DOM methods and properties, create a component that will return the following DOM element:
-
-<div class="card">
-  <img src={image url of user} />
-  <div class="card-info">
-    <h3 class="name">{users name}</h3>
-    <p class="username">{users user name}</p>
-    <p>Location: {users location}</p>
-    <p>Profile:  
-      <a href={address to users github page}>{address to users github page}</a>
-    </p>
-    <p>Followers: {users followers count}</p>
-    <p>Following: {users following count}</p>
-    <p>Bio: {users bio}</p>
-  </div>
-</div>
-
-*/
-
-/* List of LS Instructors Github username's: 
-  tetondan
-  dustinmyers
-  justsml
-  luishrd
-  bigknell
-*/
+// VARIABLE ASSIGNMENT
+const cards = document.querySelector('.cards');
+
+
+// DATA REQUEST TO GET ALL FOLLOWERS USERNAME
+axios.get('https://api.github.com/users/Ofega/followers')
+  .then(response => {
+    const usersArray = response.data.reduce((acc, user) => {
+      acc.push(user.login);
+      return acc;
+    }, []);
+
+    // DATA REQUEST TO GET EACH FOLLOWER'S DATA
+    usersArray.forEach(follower => {
+      axios.get(`https://api.github.com/users/${follower}`)
+      .then(response => {
+        cards.appendChild(githubUserCard(response.data));
+      })
+    })
+  })
+
+
+// FUNCTIONAL COMPONENT(USER CARD)
+function githubUserCard(user) {
+
+  // NEW DOM ELEMENTS CREATED
+  const card = document.createElement('div');
+  const thumbnail = 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 profileURL = document.createElement('a');
+  const followers = document.createElement('p');
+  const following = document.createElement('p');
+  const bio = document.createElement('p');
+
+  // SET ATTRIBUTES TO DOM ELEMENTS
+  card.classList.add('card');
+  thumbnail.setAttribute('src', user.avatar_url);
+  cardInfo.classList.add('card-info');
+  name.classList.add('name');
+  userName.classList.add('username');
+  profileURL.setAttribute('href', user.html_url);
+
+  // SET TEXT CONTENT OF DOM ELEMENTS
+  name.textContent = user.name;
+  location.textContent = user.location;
+  profile.textContent = 'Profile: ';
+  profileURL.textContent = user.html_url;
+  followers.textContent = `Followers: ${user.followers}`;
+  following.textContent = `Following: ${user.following}`;
+  bio.textContent = `Bio: ${!user.bio ? 'Nothing to say :)' : user.bio}`;
+
+  // NEST ELEMENTS TO FORM COMPONENT
+  cardInfo.appendChild(name);
+  cardInfo.appendChild(userName);
+  cardInfo.appendChild(location);
+  cardInfo.appendChild(profile);
+  cardInfo.appendChild(followers);
+  cardInfo.appendChild(following);
+  cardInfo.appendChild(bio);
+  profile.appendChild(profileURL);
+  card.appendChild(thumbnail);
+  card.appendChild(cardInfo);
+
+  return card;
+}

index.html

@@ -15,6 +15,7 @@
       <div class="cards"></div>
     </div>
     <!-- TODO: add CDN library here -->
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <script src="./GitHubCard/index.js"></script>
   </body>
 </html>