From ee2572b75b63850f14921c903fa8a60adcc8b117 Mon Sep 17 00:00:00 2001 From: Jordon Pruitt Date: Thu, 14 Jul 2022 06:48:30 -0400 Subject: [PATCH] done with proj, come back for stretch :D --- GitHubCard/index.js | 98 +++++++++++++++++++++++++++++++++++++++++---- README.md | 24 +++++------ index.html | 2 +- package-lock.json | 88 +++++++++++++++++++++++++++++++++------- package.json | 4 +- 5 files changed, 181 insertions(+), 35 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 9423d23af..70dd21e8f 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -3,7 +3,30 @@ (replacing the placeholder with your Github name): https://api.github.com/users/ */ +import axios from "axios"; +const followersArray = ['tetondan', +'dustinmyers', +'justsml', +'luishrd', +'bigknell']; + +followersArray.forEach(e =>{ + addMoreCards(e) +}) + + function addMoreCards(name){ + axios.get(`https://api.github.com/users/${name}`) + .then(response =>{ + container.appendChild(gHubCard(response.data)) + }) + .catch(err => { + debugger + }) + } + + + /* STEP 2: Inspect and study the data coming back, this is YOUR github info! You will need to understand the structure of this @@ -28,12 +51,18 @@ user, and adding that card to the DOM. */ -const followersArray = []; +// const followersArray = [ +// 'https://api.github.com/users/dustinmyers', +// 'https://api.github.com/users/JordonP123', +// 'https://api.github.com/users/justsml', +// 'https://api.github.com/users/luishrd', +// 'https://api.github.com/users/bigknell', +// ] /* 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: - +
@@ -50,11 +79,66 @@ const followersArray = [];
*/ +function gHubCard(obj){ + //elements apart of gHub card; +const containerDiv = document.createElement('div'); +const img = document.createElement('img'); +const secondContainerDiv = document.createElement('div'); +const h3 = document.createElement('h3'); +const pUser = document.createElement('p'); +const pLoc = document.createElement('p'); +const pProfile = document.createElement('p'); +const pFollowers = document.createElement('p'); +const pFollowing = document.createElement('p'); +const pBio = document.createElement('p'); +const anchor = document.createElement('a') + +//appending children +containerDiv.appendChild(img); +containerDiv.appendChild(secondContainerDiv); +secondContainerDiv.appendChild(h3); +secondContainerDiv.appendChild(pUser); +secondContainerDiv.appendChild(pLoc); +secondContainerDiv.appendChild(pProfile); +secondContainerDiv.appendChild(pFollowers); +secondContainerDiv.appendChild(pFollowing); +secondContainerDiv.appendChild(pBio); +pProfile.appendChild(anchor) + + +//adding classes +containerDiv.classList.add('card'); +secondContainerDiv.classList.add('card-info'); +h3.classList.add('name'); +pUser.classList.add('username'); + +//adding textContent +img.src = obj.avatar_url; +h3.textContent = obj.name; +pUser.textContent = obj.login; +pLoc.textContent = 'Location'; +pLoc.textContent = obj.location; +pProfile.textContent = 'Profile'; +anchor.href = obj.html_url; +pFollowers.textContent = `Followers: ${obj.followers}` +pFollowing.textContent = `Following: ${obj.following}` +pBio.textContent = `Bio: ${obj.bio}` + +return containerDiv + +} +//testing appends +const container = document.querySelector('.cards'); +// console.log(container.appendChild(gHubCard())) + + + + /* List of LS Instructors Github username's: - tetondan - dustinmyers - justsml - luishrd - bigknell + 'tetondan', + 'dustinmyers', + 'justsml', + 'luishrd', + 'bigknell' */ diff --git a/README.md b/README.md index e4d68668c..b77966df1 100644 --- a/README.md +++ b/README.md @@ -22,32 +22,32 @@ 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. -* [ ] Clone your OWN version of the repository (Not Bloomtech's by mistake!). -* [ ] Implement the project on your main branch, committing changes regularly. -* [ ] Push commits: git push origin main. +* [x] Create a forked copy of this project. +* [x] Clone your OWN version of the repository (Not Bloomtech's by mistake!). +* [x] Implement the project on your main branch, committing changes regularly. +* [x] Push commits: git push origin main. **Follow these steps for completing your project.** -* [ ] Copy link to canvas +* [x] Copy link to canvas ### 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 #### 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 diff --git a/index.html b/index.html index 29eb38fe2..39121b3f6 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
- + diff --git a/package-lock.json b/package-lock.json index 09ae31ca5..929422382 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.27.2" + }, "devDependencies": { "eslint": "^8.10.0", "parcel-bundler": "^1.12.4" @@ -2343,8 +2346,7 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" }, "node_modules/atob": { "version": "2.1.2", @@ -2373,6 +2375,28 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "node_modules/axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "dependencies": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "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", @@ -3238,7 +3262,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -3969,7 +3992,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true, "engines": { "node": ">=0.4.0" } @@ -4886,6 +4908,25 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", + "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==", + "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", @@ -6667,7 +6708,6 @@ "version": "1.51.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -6676,7 +6716,6 @@ "version": "2.1.34", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", - "dev": true, "dependencies": { "mime-db": "1.51.0" }, @@ -12597,8 +12636,7 @@ "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" }, "atob": { "version": "2.1.2", @@ -12618,6 +12656,27 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "requires": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "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", @@ -13348,7 +13407,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "requires": { "delayed-stream": "~1.0.0" } @@ -13947,8 +14005,7 @@ "delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, "depd": { "version": "1.1.2", @@ -14692,6 +14749,11 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "dev": true }, + "follow-redirects": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", + "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -16065,14 +16127,12 @@ "mime-db": { "version": "1.51.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", - "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", - "dev": true + "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==" }, "mime-types": { "version": "2.1.34", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", - "dev": true, "requires": { "mime-db": "1.51.0" } diff --git a/package.json b/package.json index d85e259b0..9b4bbc33a 100644 --- a/package.json +++ b/package.json @@ -19,5 +19,7 @@ "eslint": "^8.10.0", "parcel-bundler": "^1.12.4" }, - "dependencies": {} + "dependencies": { + "axios": "^0.27.2" + } }