Met MVP

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

GitHubCard/index.js

@@ -1,8 +1,101 @@
 /* Step 1: using axios, send a GET request to the following URL 
-           (replacing the palceholder with your Github name):
+           (replacing the placeholder with your Github name):
            https://api.github.com/users/<your name>
 */
 
+
+
+const cardsContainer = document.querySelector('.cards');
+
+function cardCreator(obj) {
+  // Create Elements
+  const newCard = document.createElement('div');
+  const newImg = 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');
+
+  // Create Class Name
+  newCard.classList.add('card');
+  cardInfo.classList.add('card-info');
+  name.classList.add('name');
+  userName.classList.add('username');
+
+  // adding href to link
+  // const link = document.createAttribute('href');
+  // profileLink.setAttributeNode(link);
+
+  //Adding content to elements
+  // obj.forEach(cards => {
+    newImg.src = obj.avatar_url;
+    name.textContent = obj.name;
+    userName.textContent = obj.login;
+    location.textContent = obj.location;
+    profileLink.href = obj.html_url;
+    profileLink.textContent = obj.html_url;
+    followers.textContent = `Followers: ${obj.followers}`;
+    following.textContent = `Following: ${obj.following}`;
+    bio.textContent = obj.bio;
+  // })
+  // Appending 
+  newCard.appendChild(newImg);
+  newCard.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);
+
+
+
+
+  // obj.forEach(cards => {
+    // newImg.src = obj.avatar_url;
+    // name.textContent = obj.name;
+    // userName.textContent = obj.login;
+    // location.textContent = obj.location;
+    // link.value = obj.html_url;
+    // profileLink.textContent = obj.html_url;
+    // followers.textContent = obj.followers;
+    // following.textContent = obj.following;
+    // bio.textContent = obj.bio;
+  // })
+
+  return newCard;
+  }
+
+  const followersArray = [
+    'svyatokshin',
+    'tetondan',
+    'dustinmyers',
+    'justsml',
+    'luishrd',
+    'bigknell',
+    'steven-matos'
+  ];
+
+followersArray.forEach(elem => {
+  axios.get(`https://api.github.com/users/${elem}`).then(response =>{
+    console.log("Github Profile: ", response.data);
+  cardsContainer.appendChild(cardCreator(response.data));
+  })
+  .catch(err => {
+    console.log("The data was not returned", err);
+  }) 
+})
+
+
+
+
 /* 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 
@@ -24,7 +117,19 @@
           user, and adding that card to the DOM.
 */
 
-const followersArray = [];
+// Create axios for followers
+
+axios.get("https://api.github.com/users/svyatokshin/following").then(response =>{
+ console.log("Github Followers: ", response.data)
+ response.data.forEach(elem =>{
+   followersArray.push(elem);
+   console.log("Followers Array: ", followersArray);
+ })
+})
+.catch(err => {
+  console.log("The data was not returned", err);
+})
+
 
 /* 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:
@@ -46,6 +151,61 @@ const followersArray = [];
 
 */
 
+
+// const cardsContainer = document.querySelector('.cards');
+
+// function cardCreator(obj) {
+//   const newCard = document.createElement('div');
+//   const newImg = 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');
+
+//   newCard.classList.add('card');
+//   cardInfo.classList.add('card-info');
+//   name.classList.add('name');
+//   userName.classList.add('username');
+
+
+//   newCard.append(newImg);
+//   newCard.append(cardInfo);
+//   cardInfo.append(name);
+//   cardInfo.append(userName);
+//   cardInfo.append(location);
+//   cardInfo.append(profile);
+//   cardInfo.append(followers);
+//   cardInfo.append(following);
+//   cardInfo.append(bio);
+//   profile.append(profileLink);
+
+
+//   // adding href to link
+//   const link = document.createAttribute('href');
+//   profileLink.setAttributeNode(link);
+
+//   // obj.forEach(cards => {
+//     newImg.src = cards.avatar_url;
+//     name.textContent = cards.name;
+//     userName.textContent = cards.login;
+//     location.textContent = cards.location;
+//     link.value = cards.html_url;
+//     linkAddress.textContent = cards.html_url;
+//     followers.textContent = cards.followers;
+//     following.textContent = cards.following;
+//     bio.textContent = cards.bio;
+//   // })
+
+//   return newCard;
+// }
+
+// cardsContainer.appendChild(cardCreator(followersArray));
+
 /* List of LS Instructors Github username's: 
   tetondan
   dustinmyers

index.html

@@ -4,6 +4,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./index.css">
+
+
   </head>
   <body>
     <div class="container">
@@ -15,6 +17,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>