From d8803e95951483e8c97673a566ca3b4e3d5441a6 Mon Sep 17 00:00:00 2001 From: Gage Clancy Date: Thu, 10 Mar 2022 16:13:04 -0600 Subject: [PATCH 1/3] got some baseline stuff working --- GitHubCard/index.js | 41 +++++++++++++++++++++++++++++++++++++++++ package-lock.json | 43 +++++++++++++++++++++++++++++++++++++++++++ package.json | 4 +++- 3 files changed, 87 insertions(+), 1 deletion(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 9423d23af..5eb31f58b 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -1,8 +1,14 @@ +import axios from "axios"; /* STEP 1: using axios, send a GET request to the following URL (replacing the placeholder with your Github name): https://api.github.com/users/ */ +axios.get('https://api.github.com/users/gclancy121') +.then ((res) => { + createProfile(res.data); +}) + /* STEP 2: Inspect and study the data coming back, this is YOUR @@ -33,7 +39,42 @@ const followersArray = []; /* STEP 3: Create a function that accepts a single object as its only argument. Using DOM methods and properties, create and return the following markup: + */ + + function createProfile(obj) { + const card = document.createElement('div'); + const image = 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'); + card.appendChild(image); + card.appendChild(cardInfo); + cardInfo.appendChild(name); + cardInfo.appendChild(username); + cardInfo.appendChild(location); + cardInfo.appendChild(profile); + profile.appendChild(profileURL); + cardInfo.appendChild(followers); + cardInfo.appendChild(following); + cardInfo.appendChild(bio); + card.classList.add('card'); + cardInfo.classList.add('card-info'); + name.classList.add('name'); + username.classList.add('username'); + + + return card; +} +createProfile(); +console.log(createProfile()); + /*
diff --git a/package-lock.json b/package-lock.json index 09ae31ca5..9aedbc81d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "github-usercard", "version": "1.0.0", "license": "ISC", + "dependencies": { + "axios": "^0.26.1" + }, "devDependencies": { "eslint": "^8.10.0", "parcel-bundler": "^1.12.4" @@ -2373,6 +2376,14 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "node_modules/axios": { + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz", + "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==", + "dependencies": { + "follow-redirects": "^1.14.8" + } + }, "node_modules/babel-plugin-dynamic-import-node": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", @@ -4886,6 +4897,25 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.14.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", + "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -12618,6 +12648,14 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz", + "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==", + "requires": { + "follow-redirects": "^1.14.8" + } + }, "babel-plugin-dynamic-import-node": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", @@ -14692,6 +14730,11 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "dev": true }, + "follow-redirects": { + "version": "1.14.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", + "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", diff --git a/package.json b/package.json index d85e259b0..019a9d954 100644 --- a/package.json +++ b/package.json @@ -19,5 +19,7 @@ "eslint": "^8.10.0", "parcel-bundler": "^1.12.4" }, - "dependencies": {} + "dependencies": { + "axios": "^0.26.1" + } } From 0ed77a1703f81fea0fd1b0b166e22c8dec25c13d Mon Sep 17 00:00:00 2001 From: Gage Clancy Date: Thu, 10 Mar 2022 16:32:33 -0600 Subject: [PATCH 2/3] through step 4 --- GitHubCard/index.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 5eb31f58b..61958556d 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -8,6 +8,9 @@ axios.get('https://api.github.com/users/gclancy121') .then ((res) => { createProfile(res.data); }) +.catch(err => { + console.error(err); +}) /* @@ -42,6 +45,7 @@ const followersArray = []; */ function createProfile(obj) { + console.log(obj); const card = document.createElement('div'); const image = document.createElement('img'); const cardInfo = document.createElement('div'); @@ -67,13 +71,23 @@ const followersArray = []; cardInfo.classList.add('card-info'); name.classList.add('name'); username.classList.add('username'); - + image.src=obj.avatar_url; + name.textContent=obj.name; + username.textContent=obj.login; + location.textContent=obj.location; + profileURL.textContent='Profile'; + profileURL.href=obj.html_url; + profileURL.target='_blank'; + followers.textContent=`Followers: ${obj.followers}`; + following.textContent=`Following: ${obj.following}`; + bio.textContent=obj.bio; - return card; + console.log(card); + document.querySelector('.cards').appendChild(card); } -createProfile(); -console.log(createProfile()); + + /*
From 25a02581cc89ea736e510986bb9b64ab3b2a9c51 Mon Sep 17 00:00:00 2001 From: Gage Clancy Date: Thu, 10 Mar 2022 16:50:40 -0600 Subject: [PATCH 3/3] finished --- GitHubCard/index.js | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 61958556d..6dcfcd932 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -12,7 +12,7 @@ axios.get('https://api.github.com/users/gclancy121') console.error(err); }) - + /* STEP 2: Inspect and study the data coming back, this is YOUR github info! You will need to understand the structure of this @@ -37,7 +37,23 @@ axios.get('https://api.github.com/users/gclancy121') user, and adding that card to the DOM. */ -const followersArray = []; +const followersArray = ['tetondan', + 'dustinmyers', + 'justsml', + 'luishrd', + 'bigknell']; + +for (let i = 0; i { + createProfile(resData.data); + }) + .catch(err => { + console.error(err); + }) +} + + /* STEP 3: Create a function that accepts a single object as its only argument. @@ -45,7 +61,6 @@ const followersArray = []; */ function createProfile(obj) { - console.log(obj); const card = document.createElement('div'); const image = document.createElement('img'); const cardInfo = document.createElement('div'); @@ -82,12 +97,11 @@ const followersArray = []; following.textContent=`Following: ${obj.following}`; bio.textContent=obj.bio; - console.log(card); + document.querySelector('.cards').appendChild(card); } - /*
@@ -107,9 +121,5 @@ const followersArray = []; /* List of LS Instructors Github username's: - tetondan - dustinmyers - justsml - luishrd - bigknell + */