From ee153196d4f1aa54ef3a703a1ae32f23ede0453b Mon Sep 17 00:00:00 2001 From: ofega Date: Thu, 5 Sep 2019 18:43:43 +0100 Subject: [PATCH 1/3] created user card functional component --- GitHubCard/index.js | 119 ++++++++++++++++++++++++-------------------- index.html | 1 + 2 files changed, 65 insertions(+), 55 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 5c303ad69..da6569963 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -1,55 +1,64 @@ -/* Step 1: using axios, send a GET request to the following URL - (replacing the palceholder with your Github name): - https://api.github.com/users/ -*/ - -/* 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//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: - -
- -
-

{users name}

-

{users user name}

-

Location: {users location}

-

Profile: - {address to users github page} -

-

Followers: {users followers count}

-

Following: {users following count}

-

Bio: {users bio}

-
-
- -*/ - -/* List of LS Instructors Github username's: - tetondan - dustinmyers - justsml - luishrd - bigknell -*/ +// VARIABLE ASSIGNMENT +const cards = document.querySelector('.cards'); +const usersArray = ['ofega', 'tetondan', 'dustinmyers', 'justsml', 'luishrd', 'bigknell']; + + +// DATA REQUEST FOR EACH USER +usersArray.forEach(follower => { + axios.get(`https://api.github.com/users/${follower}`) + .then(response => { + cards.appendChild(githubUserCard(response.data)); + }) + .catch(error => { + console.log(error); + }) +}) + + +// 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 = !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; +} diff --git a/index.html b/index.html index 9cf6e5c27..1aa5b9c2b 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
+ From 0d0c464c729c82c22f16d2d13c3f251107ad36b8 Mon Sep 17 00:00:00 2001 From: ofega Date: Thu, 5 Sep 2019 22:50:40 +0100 Subject: [PATCH 2/3] programmatically generated data for users Array --- GitHubCard/index.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index da6569963..6bbb1f135 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -1,18 +1,22 @@ // VARIABLE ASSIGNMENT const cards = document.querySelector('.cards'); -const usersArray = ['ofega', 'tetondan', 'dustinmyers', 'justsml', 'luishrd', 'bigknell']; -// DATA REQUEST FOR EACH USER -usersArray.forEach(follower => { - axios.get(`https://api.github.com/users/${follower}`) +// DATA REQUEST +axios.get('https://api.github.com/users/Ofega/followers') .then(response => { - cards.appendChild(githubUserCard(response.data)); - }) - .catch(error => { - console.log(error); + const usersArray = response.data.reduce((acc, user) => { + acc.push(user.login); + return acc; + }, []); + + usersArray.forEach(follower => { + axios.get(`https://api.github.com/users/${follower}`) + .then(response => { + cards.appendChild(githubUserCard(response.data)); + }) + }) }) -}) // FUNCTIONAL COMPONENT(USER CARD) @@ -46,7 +50,7 @@ function githubUserCard(user) { profileURL.textContent = user.html_url; followers.textContent = `Followers: ${user.followers}`; following.textContent = `Following: ${user.following}`; - bio.textContent = !user.bio ? 'Nothing to say :)' : user.bio; + bio.textContent = `Bio: ${!user.bio ? 'Nothing to say :)' : user.bio}`; // NEST ELEMENTS TO FORM COMPONENT cardInfo.appendChild(name); From df031630f4fd169745bc18835cd11e132cb29c13 Mon Sep 17 00:00:00 2001 From: ofega Date: Thu, 5 Sep 2019 22:57:33 +0100 Subject: [PATCH 3/3] done some refactoring --- GitHubCard/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 6bbb1f135..49cb133b8 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -2,7 +2,7 @@ const cards = document.querySelector('.cards'); -// DATA REQUEST +// 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) => { @@ -10,6 +10,7 @@ axios.get('https://api.github.com/users/Ofega/followers') return acc; }, []); + // DATA REQUEST TO GET EACH FOLLOWER'S DATA usersArray.forEach(follower => { axios.get(`https://api.github.com/users/${follower}`) .then(response => {