finished part one

GitHubCard/index.js

@@ -3,7 +3,22 @@
     (replacing the placeholder with your Github name):
     https://api.github.com/users/<your name>
 */
+// set up a GET request
 
+axios.
+
+get('https://api.github.com/users/Caleno83')
+
+
+.then((res) => {
+  console.log('This is the response : ', res);
+  const response = res.data
+  cards.appendChild(mainProfileCard(response))
+})
+
+.catch((err) => {
+  console.log('The error is :', err);
+});
 /*
   STEP 2: Inspect and study the data coming back, this is YOUR
     github info! You will need to understand the structure of this
@@ -16,7 +31,7 @@
   STEP 4: Pass the data received from Github into your function,
     and append the returned markup to the DOM as a child of .cards
 */
-
+const cards = document.querySelector('.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,
@@ -28,7 +43,53 @@
     user, and adding that card to the DOM.
 */
 
-const followersArray = [];
+const followersArray = [ "tetondan", "dustinmyers", "justsml", "luishrd", "bigknell"];
+
+//Set up Get request for followers 
+// this was for my followers, but I only have one.
+// axios
+
+//   .get("https://api.github.com/users/Caleno83/followers")
+
+//   .then((res) => {
+//     console.log('This is the response : ', res);
+//     const response = res.data
+//     response.forEach((url) => {
+//      cards.appendChild(mainProfileCard(url))
+//     })
+//   })
+
+//   .catch((err) => {
+
+//     console.log('The error is :', err)
+//   })
+
+
+followersArray.forEach(element => {
+
+  axios
+
+  .get(`https://api.github.com/users/${element}`)
+
+  .then((res) => {
+    console.log('This is the response : ', res);
+    const response = res.data
+    cards.appendChild(mainProfileCard(response))
+  })
+
+  .catch((err) => {
+
+    console.log('The error is :', err)
+  })
+})
+
+console.log(followersArray)
+
+
+
+
+
+
 
 /*
   STEP 3: Create a function that accepts a single object as its only argument.
@@ -50,6 +111,55 @@ const followersArray = [];
     </div>
 */
 
+function mainProfileCard (obj) {
+
+  //creating elements
+  const card = document.createElement('div');
+  const img = document.createElement('img');
+  const cardInfo = document.createElement('div');
+  const nameTitle = document.createElement('h3');
+  const usernamePara = document.createElement('p');
+  const locationPara = document.createElement('p')
+  const profilePara = document.createElement('p');
+  const profileAnchor = document.createElement('a');
+  const followersPara = document.createElement('p');
+  const followingPara = document.createElement('p');
+  const bioPara = document.createElement('p');
+
+  //adding classes to elements
+
+  card.classList.add('card');
+  cardInfo.classList.add('card-info');
+  nameTitle.classList.add('name');
+  usernamePara.classList.add('username');
+
+  //adding parent element to child elements
+  card.appendChild(img);
+  card.appendChild(cardInfo);
+  cardInfo.appendChild(nameTitle);
+  cardInfo.appendChild(usernamePara);
+  cardInfo.appendChild(locationPara);
+  cardInfo.appendChild(profilePara);
+  profilePara.appendChild(profileAnchor);
+  cardInfo.appendChild(followersPara);
+  cardInfo.appendChild(followingPara);
+  cardInfo.appendChild(bioPara);
+
+  img.src =  obj.avatar_url;
+  nameTitle.textContent = obj.name;
+  usernamePara.textContent = `Username : ${obj.login}`;
+  locationPara.textContent = obj.location;
+  profileAnchor.textContent = `Website : ${obj.html_url}`;
+  followersPara.textContent = `Followers : ${obj.followers}`;
+  followingPara.textContent = `Following : ${obj.following}`;
+  bioPara.textContent = obj.bio;
+
+  return card
+
+};
+
+// console.log to check structure of html
+//console.log(mainProfileCard())
 /*
   List of LS Instructors Github username's:
     tetondan

README.md

@@ -18,18 +18,18 @@ In this project we are going to be accessing the GitHub API and building a socia
 
 **Follow these steps to set up and work on your project:**
 
-* [ ] Create a forked copy of this project.
-* [ ] Add your project manager as collaborator on Github.
-* [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-* [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-* [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-* [ ] Push commits: git push origin `<firstName-lastName>`.
+* [ x] Create a forked copy of this project.
+* [ x] Add your project manager as collaborator on Github.
+* [ x] Clone your OWN version of the repository (Not Lambda's by mistake!).
+* [ x] Create a new branch: git checkout -b `<firstName-lastName>`.
+* [x ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+* [ x] Push commits: git push origin `<firstName-lastName>`.
 
 **Follow these steps for completing your project.**
 
-* [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
-* [ ] Add your project manager as a reviewer on the pull-request
-* [ ] Your project manager will count the project as complete by merging the branch back into master.
+* [ x] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
+* [x ] Add your project manager as a reviewer on the pull-request
+* [ x] Your project manager will count the project as complete by merging the branch back into master.
 
 ### Preprocessor Setup
 

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>