diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 405f87c09..2f7cb6f9e 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -3,7 +3,22 @@ (replacing the placeholder with your Github name): https://api.github.com/users/ */ +// 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//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 = []; */ +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 diff --git a/README.md b/README.md index b1a84e5c7..e58f277bb 100644 --- a/README.md +++ b/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 ``. -* [ ] Implement the project on your newly created `` branch, committing changes regularly. -* [ ] Push commits: git push origin ``. +* [ 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 ``. +* [x ] Implement the project on your newly created `` branch, committing changes regularly. +* [ x] Push commits: git push origin ``. **Follow these steps for completing your project.** -* [ ] Submit a Pull-Request to merge 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 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 diff --git a/index.html b/index.html index 9cf6e5c27..1aa5b9c2b 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
+