diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 405f87c09..6dde340a2 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -1,9 +1,16 @@ +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/ */ +//imports correctly + +axios.get('https://api.github.com/users/suzannecabral') + + /* STEP 2: Inspect and study the data coming back, this is YOUR github info! You will need to understand the structure of this @@ -16,6 +23,17 @@ 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 @@ -27,8 +45,32 @@ 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 = [ + 'tetondan', + 'dustinmyers', + 'justsml', + 'luishrd', + 'bigknell' +]; -const followersArray = []; +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. @@ -50,6 +92,105 @@ 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 cf348353a..3eecc4ba7 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 @@ -22,50 +22,50 @@ 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 -* [ ] 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 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" + } }