From 9cb418a81acea6a142db8eef8d90d8591b93a45d Mon Sep 17 00:00:00 2001 From: Suzanne Cabral Date: Thu, 3 Sep 2020 13:13:33 -0700 Subject: [PATCH 1/4] initial commit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cf348353a..b20b7f202 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # Github User Cards - + In this project we are going to be accessing the GitHub API and building a social card based on the data we get back. The goal is to create a component based on the data we get when we send a GET request to the GitHub API (requesting your own data at first). The CSS and the base HTML is already done for you, you simply need to create the component function and connect the pieces. ## Need to know From b205420395a0999cc019f2f0351c5cdab0685929 Mon Sep 17 00:00:00 2001 From: Suzanne Cabral Date: Thu, 3 Sep 2020 13:20:08 -0700 Subject: [PATCH 2/4] added Axios --- GitHubCard/index.js | 2 ++ package-lock.json | 13 +++++++++++++ package.json | 4 +++- 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 405f87c09..03542fbf7 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -1,3 +1,5 @@ +import axios from 'axios'; + /* STEP 1: using axios, send a GET request to the following URL (replacing the placeholder with your Github name): diff --git a/package-lock.json b/package-lock.json index 53510781c..635088801 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1393,6 +1393,14 @@ "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==", "dev": true }, + "axios": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz", + "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "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", @@ -3529,6 +3537,11 @@ "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==", "dev": true }, + "follow-redirects": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz", + "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==" + }, "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 2b490977e..d4171f48f 100644 --- a/package.json +++ b/package.json @@ -19,5 +19,7 @@ "eslint": "^7.3.0", "parcel-bundler": "^1.12.4" }, - "dependencies": {} + "dependencies": { + "axios": "^0.20.0" + } } From aa3dfad0eb0eeee13b91edba2ef088b74409258c Mon Sep 17 00:00:00 2001 From: Suzanne Cabral Date: Thu, 3 Sep 2020 15:58:06 -0700 Subject: [PATCH 3/4] Contact card constructor works using fake data --- GitHubCard/index.js | 99 +++++++++++++++++++++++++++++++++++++++++++++ README.md | 34 ++++++++-------- 2 files changed, 116 insertions(+), 17 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 03542fbf7..7f378130c 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -6,6 +6,11 @@ import axios from 'axios'; https://api.github.com/users/ */ +const gitData = axios.get('https://api.github.com/users/suzannecabral'); +//imports correctly + +// console.log(gitData[name]); + /* STEP 2: Inspect and study the data coming back, this is YOUR github info! You will need to understand the structure of this @@ -52,6 +57,100 @@ const followersArray = []; */ +const fakeDataObj = { + login:"suzannecabral", + id:25539417, + node_id:"MDQ6VXNlcjI1NTM5NDE3", + avatar_url:"https://avatars1.githubusercontent.com/u/25539417?v=4", + gravatar_id: "", + url:"https://api.github.com/users/suzannecabral", + html_url:"https://github.com/suzannecabral", + followers_url:"https://api.github.com/users/suzannecabral/followers", + following_url:"https://api.github.com/users/suzannecabral/following{/other_user}", + gists_url:"https://api.github.com/users/suzannecabral/gists{/gist_id}", + starred_url:"https://api.github.com/users/suzannecabral/starred{/owner}{/repo}", + subscriptions_url:"https://api.github.com/users/suzannecabral/subscriptions", + organizations_url:"https://api.github.com/users/suzannecabral/orgs", + repos_url:"https://api.github.com/users/suzannecabral/repos", + events_url:"https://api.github.com/users/suzannecabral/events{/privacy}", + received_events_url:"https://api.github.com/users/suzannecabral/received_events", + type:"User", + site_admin:false, + name:"Suzanne", + company:null, + blog:"", + location:"Concord, CA", + email:null, + hireable:true, + bio:"Blah blah fake bio", + twitter_username:null, + public_repos:22, + public_gists:0, + followers:3, + following:4, + created_at:"2017-02-03T22:59:36Z", + updated_at:"2020-09-03T20:17:51Z" +}; + + + +function cardMaker (dataObj) { + //create main elem + + const newCard = document.createElement('div'); + newCard.classList.add('card'); + + const gitImg = document.createElement('img'); + gitImg.src = dataObj["avatar_url"]; + + const infoDiv = document.createElement('div'); + infoDiv.classList.add('card-info'); + + const gitRealname = document.createElement('h3'); + gitRealname.classList.add('name'); + gitRealname.innerHTML = dataObj.name; + + const gitAlias = document.createElement('p'); + gitAlias.classList.add('user'); + gitAlias.innerHTML = dataObj.login; + + const gitLoc = document.createElement('p'); + gitLoc.innerHTML = dataObj.location; + + + //need to link together link and "profile" label + const gitProfile = document.createElement('p'); + gitProfile.innerHTML = 'Profile: ' + const gitLink = document.createElement('a'); + gitLink.innerHTML = dataObj["html_url"]; + gitLink.href = dataObj["html_url"]; + + const gitFollowers = document.createElement('p'); + gitFollowers.innerHTML = 'Followers: ' + dataObj.followers; + + const gitFollowing = document.createElement('p'); + gitFollowing.innerHTML = 'Following: ' + dataObj.following; + + const gitBio = document.createElement('p'); + gitBio.innerHTML = 'Bio: ' + dataObj.bio; + + //connect element together + gitProfile.append(gitLink); + + infoDiv.append(gitRealname,gitAlias,gitLoc,gitProfile,gitFollowers,gitFollowing,gitBio); + + newCard.append(gitImg,infoDiv); + + console.log(newCard); + return newCard; + +} + +const cardContainer = document.querySelector('div.cards'); +const testCard = cardMaker(fakeDataObj); +cardContainer.append(testCard); + +// const testList = []; /* List of LS Instructors Github username's: tetondan diff --git a/README.md b/README.md index b20b7f202..a1226fcc8 100644 --- a/README.md +++ b/README.md @@ -22,37 +22,37 @@ 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 team lead 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 team lead 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 `main` (student's Repo). **Please don't merge your own pull request** -* [ ] Add your team lead as a reviewer on the pull-request. -* [ ] Your team lead will count the project as complete by merging the branch back into `main` branch. +* [x] Submit a Pull-Request to merge `` Branch into `main` (student's Repo). **Please don't merge your own pull request** +* [x] Add your team lead as a reviewer on the pull-request. +* [x] Your team lead will count the project as complete by merging the branch back into `main` branch. ### Project Setup -* [ ] Navigate to the root of the project with your command line. -* [ ] Run `npm install` to download any dependencies listed in the `package.json` file. -* [ ] Run `npm start` to compile your project and launch a development server. +* [x] Navigate to the root of the project with your command line. +* [x] Run `npm install` to download any dependencies listed in the `package.json` file. +* [x] Run `npm start` to compile your project and launch a development server. ### Axios Setup #### Option 1 (adding Axios via script element) -* [ ] Include the script element linking the `axios` library in your HTML. -* [ ] If you do not remember the code you can find it [here](https://github.com/axios/axios). +* [x] Include the script element linking the `axios` library in your HTML. +* [x] If you do not remember the code you can find it [here](https://github.com/axios/axios). #### Option 2 (installing Axios with npm) -* [ ] Navigate to the root of the project with your command line. -* [ ] Run `npm install axios` to download the dependency (it will be added to the `package.json` file). -* [ ] At the top of the `GitHubCard/index.js` file, type `import axios from 'axios';` +* [x] Navigate to the root of the project with your command line. +* [x] Run `npm install axios` to download the dependency (it will be added to the `package.json` file). +* [x] At the top of the `GitHubCard/index.js` file, type `import axios from 'axios';` ### Part 1: Requesting Data from the GitHub API From 731fc34c4ac8b9315357e6bb25ac691a7db151cf Mon Sep 17 00:00:00 2001 From: Suzanne Cabral Date: Thu, 3 Sep 2020 16:29:59 -0700 Subject: [PATCH 4/4] MVP complete, new cards generated from friends array --- GitHubCard/index.js | 120 +++++++++++++++++++++++++++++--------------- README.md | 6 +-- 2 files changed, 83 insertions(+), 43 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 7f378130c..6dde340a2 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -6,10 +6,10 @@ import axios from 'axios'; https://api.github.com/users/ */ -const gitData = axios.get('https://api.github.com/users/suzannecabral'); //imports correctly -// console.log(gitData[name]); +axios.get('https://api.github.com/users/suzannecabral') + /* STEP 2: Inspect and study the data coming back, this is YOUR @@ -23,6 +23,17 @@ const gitData = axios.get('https://api.github.com/users/suzannecabral'); STEP 4: Pass the data received from Github into your function, and append the returned markup to the DOM as a child of .cards */ +.then(newData => { + console.log(newData.data); + const gitData = newData.data; + + const card1 = cardMaker(gitData); + cardContainer.append(card1); +}) +.catch(err => { + console.log(err) + debugger +}) /* STEP 5: Now that you have your own card getting added to the DOM, either @@ -34,8 +45,32 @@ const gitData = axios.get('https://api.github.com/users/suzannecabral'); 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 = []; +const followersArray = [ + 'tetondan', + 'dustinmyers', + 'justsml', + 'luishrd', + 'bigknell' +]; + +const followersUrl = followersArray.map((item)=>{ + return `https://api.github.com/users/${item}`; +}); + + + +followersUrl.forEach((item) => { + axios.get(item) + .then(result => { + const newData = result.data; + const newCard = cardMaker(newData); + cardContainer.append(newCard); + }) + .catch(err => { + console.log(err); + debugger; + }) +}); /* STEP 3: Create a function that accepts a single object as its only argument. @@ -57,40 +92,40 @@ const followersArray = []; */ -const fakeDataObj = { - login:"suzannecabral", - id:25539417, - node_id:"MDQ6VXNlcjI1NTM5NDE3", - avatar_url:"https://avatars1.githubusercontent.com/u/25539417?v=4", - gravatar_id: "", - url:"https://api.github.com/users/suzannecabral", - html_url:"https://github.com/suzannecabral", - followers_url:"https://api.github.com/users/suzannecabral/followers", - following_url:"https://api.github.com/users/suzannecabral/following{/other_user}", - gists_url:"https://api.github.com/users/suzannecabral/gists{/gist_id}", - starred_url:"https://api.github.com/users/suzannecabral/starred{/owner}{/repo}", - subscriptions_url:"https://api.github.com/users/suzannecabral/subscriptions", - organizations_url:"https://api.github.com/users/suzannecabral/orgs", - repos_url:"https://api.github.com/users/suzannecabral/repos", - events_url:"https://api.github.com/users/suzannecabral/events{/privacy}", - received_events_url:"https://api.github.com/users/suzannecabral/received_events", - type:"User", - site_admin:false, - name:"Suzanne", - company:null, - blog:"", - location:"Concord, CA", - email:null, - hireable:true, - bio:"Blah blah fake bio", - twitter_username:null, - public_repos:22, - public_gists:0, - followers:3, - following:4, - created_at:"2017-02-03T22:59:36Z", - updated_at:"2020-09-03T20:17:51Z" -}; +// const fakeDataObj = { +// login:"suzannecabral", +// id:25539417, +// node_id:"MDQ6VXNlcjI1NTM5NDE3", +// avatar_url:"https://avatars1.githubusercontent.com/u/25539417?v=4", +// gravatar_id: "", +// url:"https://api.github.com/users/suzannecabral", +// html_url:"https://github.com/suzannecabral", +// followers_url:"https://api.github.com/users/suzannecabral/followers", +// following_url:"https://api.github.com/users/suzannecabral/following{/other_user}", +// gists_url:"https://api.github.com/users/suzannecabral/gists{/gist_id}", +// starred_url:"https://api.github.com/users/suzannecabral/starred{/owner}{/repo}", +// subscriptions_url:"https://api.github.com/users/suzannecabral/subscriptions", +// organizations_url:"https://api.github.com/users/suzannecabral/orgs", +// repos_url:"https://api.github.com/users/suzannecabral/repos", +// events_url:"https://api.github.com/users/suzannecabral/events{/privacy}", +// received_events_url:"https://api.github.com/users/suzannecabral/received_events", +// type:"User", +// site_admin:false, +// name:"Suzanne", +// company:null, +// blog:"", +// location:"Concord, CA", +// email:null, +// hireable:true, +// bio:"Blah blah fake bio", +// twitter_username:null, +// public_repos:22, +// public_gists:0, +// followers:3, +// following:4, +// created_at:"2017-02-03T22:59:36Z", +// updated_at:"2020-09-03T20:17:51Z" +// }; @@ -147,8 +182,13 @@ function cardMaker (dataObj) { } const cardContainer = document.querySelector('div.cards'); -const testCard = cardMaker(fakeDataObj); -cardContainer.append(testCard); + +// const testCard = cardMaker(fakeDataObj); +// cardContainer.append(testCard); + + + + // const testList = []; /* diff --git a/README.md b/README.md index a1226fcc8..3eecc4ba7 100644 --- a/README.md +++ b/README.md @@ -56,16 +56,16 @@ In this project we are going to be accessing the GitHub API and building a socia ### Part 1: Requesting Data from the GitHub API -* [ ] Follow the instructions found in the `GitHubCard/index.js` file to request data from the GitHub API. +* [x] Follow the instructions found in the `GitHubCard/index.js` file to request data from the GitHub API. ### Part 2: Create the component function -* Once you are receiving data from the GitHub API, take some time to study the data and the information it is giving you. You will create the HTML template you see in the GitHubCard/index.js file and plugging in the dynamic data you are getting from the GitHub API. +* [x] Once you are receiving data from the GitHub API, take some time to study the data and the information it is giving you. You will create the HTML template you see in the GitHubCard/index.js file and plugging in the dynamic data you are getting from the GitHub API. * Once you complete the component, create a component based on your profile and add it to the DOM. ### Part 3: Your Friends -* After you have successfully added your own card to the DOM, we will get a list of your followers and programmatically add cards for them as well. Follow the instructions in GitHubCard/index.js. +* [x] After you have successfully added your own card to the DOM, we will get a list of your followers and programmatically add cards for them as well. Follow the instructions in GitHubCard/index.js. ### Part 4: Exit Ticket