├── .eslintrc.js ├── .gitignore ├── GitHubCard └── index.js ├── README.md ├── assets ├── githublogo.png └── lambdalogo.png ├── example-preview.png ├── index.css ├── index.html ├── package-lock.json └── package.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true, 4 | "es2020": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "parserOptions": { 8 | "ecmaVersion": 11, 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | # Logs 63 | logs 64 | *.log 65 | npm-debug.log* 66 | yarn-debug.log* 67 | yarn-error.log* 68 | lerna-debug.log* 69 | 70 | # Diagnostic reports (https://nodejs.org/api/report.html) 71 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 72 | 73 | # Runtime data 74 | pids 75 | *.pid 76 | *.seed 77 | *.pid.lock 78 | 79 | # Directory for instrumented libs generated by jscoverage/JSCover 80 | lib-cov 81 | 82 | # Coverage directory used by tools like istanbul 83 | coverage 84 | *.lcov 85 | 86 | # nyc test coverage 87 | .nyc_output 88 | 89 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 90 | .grunt 91 | 92 | # Bower dependency directory (https://bower.io/) 93 | bower_components 94 | 95 | # node-waf configuration 96 | .lock-wscript 97 | 98 | # Compiled binary addons (https://nodejs.org/api/addons.html) 99 | build/Release 100 | 101 | # Dependency directories 102 | node_modules/ 103 | jspm_packages/ 104 | 105 | # Snowpack dependency directory (https://snowpack.dev/) 106 | web_modules/ 107 | 108 | # TypeScript cache 109 | *.tsbuildinfo 110 | 111 | # Optional npm cache directory 112 | .npm 113 | 114 | # Optional eslint cache 115 | .eslintcache 116 | 117 | # Microbundle cache 118 | .rpt2_cache/ 119 | .rts2_cache_cjs/ 120 | .rts2_cache_es/ 121 | .rts2_cache_umd/ 122 | 123 | # Optional REPL history 124 | .node_repl_history 125 | 126 | # Output of 'npm pack' 127 | *.tgz 128 | 129 | # Yarn Integrity file 130 | .yarn-integrity 131 | 132 | # dotenv environment variables file 133 | .env 134 | .env.test 135 | 136 | # parcel-bundler cache (https://parceljs.org/) 137 | .cache 138 | .parcel-cache 139 | 140 | # Next.js build output 141 | .next 142 | out 143 | 144 | # Nuxt.js build / generate output 145 | .nuxt 146 | dist 147 | 148 | # Gatsby files 149 | .cache/ 150 | # Comment in the public line in if your project uses Gatsby and not Next.js 151 | # https://nextjs.org/blog/next-9-1#public-directory-support 152 | # public 153 | 154 | # vuepress build output 155 | .vuepress/dist 156 | 157 | # Serverless directories 158 | .serverless/ 159 | 160 | # FuseBox cache 161 | .fusebox/ 162 | 163 | # DynamoDB Local files 164 | .dynamodb/ 165 | 166 | # TernJS port file 167 | .tern-port 168 | 169 | # Stores VSCode versions used for testing VSCode extensions 170 | .vscode-test 171 | 172 | # yarn v2 173 | .yarn/cache 174 | .yarn/unplugged 175 | .yarn/build-state.yml 176 | .yarn/install-state.gz 177 | .pnp.* 178 | -------------------------------------------------------------------------------- /GitHubCard/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | STEP 1: using axios, send a GET request to the following URL 3 | (replacing the placeholder with your Github name): 4 | https://api.github.com/users/ 5 | */ 6 | 7 | /* 8 | STEP 2: Inspect and study the data coming back, this is YOUR 9 | github info! You will need to understand the structure of this 10 | data in order to use it to build your component function 11 | 12 | Skip to STEP 3 (line 34). 13 | */ 14 | 15 | /* 16 | STEP 4: Pass the data received from Github into your function, 17 | and append the returned markup to the DOM as a child of .cards 18 | */ 19 | 20 | /* 21 | STEP 5: Now that you have your own card getting added to the DOM, either 22 | follow this link in your browser https://api.github.com/users//followers, 23 | manually find some other users' github handles, or use the list found at the 24 | bottom of the page. Get at least 5 different Github usernames and add them as 25 | Individual strings to the friendsArray below. 26 | 27 | Using that array, iterate over it, requesting data for each user, creating a new card for each 28 | user, and adding that card to the DOM. 29 | */ 30 | 31 | const followersArray = []; 32 | 33 | /* 34 | STEP 3: Create a function that accepts a single object as its only argument. 35 | Using DOM methods and properties, create and return the following markup: 36 | 37 |
38 | 39 |
40 |

{users name}

41 |

{users user name}

42 |

Location: {users location}

43 |

Profile: 44 | {address to users github page} 45 |

46 |

Followers: {users followers count}

47 |

Following: {users following count}

48 |

Bio: {users bio}

49 |
50 |
51 | */ 52 | 53 | /* 54 | List of LS Instructors Github username's: 55 | tetondan 56 | dustinmyers 57 | justsml 58 | luishrd 59 | bigknell 60 | */ 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Github User Cards 2 | 3 | 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. 4 | 5 | ## Need to know 6 | 7 | * Adding dependencies to a project: 8 | * Via script element 9 | * Using npm 10 | * JavaScript: 11 | * Creating DOM components with Javascript Functions 12 | * Utilizing 3rd party libraries (Axios) 13 | * Promises, .then & .catch 14 | * HTTP GET requests 15 | * Array Methods 16 | * DOM 17 | * Element selection 18 | * Basic DOM manipulation 19 | * Events and event listeners 20 | 21 | ## Set Up The Project With Git 22 | 23 | **Follow these steps to set up and work on your project:** 24 | 25 | * [ ] Create a forked copy of this project. 26 | * [ ] Clone your OWN version of the repository (Not Bloomtech's by mistake!). 27 | * [ ] Implement the project on your main branch, committing changes regularly. 28 | * [ ] Push commits: git push origin main. 29 | 30 | **Follow these steps for completing your project.** 31 | 32 | * [ ] Copy link to canvas 33 | 34 | ### Project Setup 35 | 36 | * [ ] Navigate to the root of the project with your command line. 37 | * [ ] Run `npm install` to download any dependencies listed in the `package.json` file. 38 | * [ ] Run `npm start` to compile your project and launch a development server. 39 | 40 | ### Axios Setup 41 | 42 | #### Installing Axios with npm 43 | 44 | * [ ] Navigate to the root of the project with your command line. 45 | * [ ] Run `npm install axios` to download the dependency (it will be added to the `package.json` file). 46 | * [ ] At the top of the `GitHubCard/index.js` file, type `import axios from 'axios';` 47 | 48 | ### Part 1: Requesting Data from the GitHub API 49 | 50 | * [ ] Follow the instructions found in the `GitHubCard/index.js` file to request data from the GitHub API. 51 | 52 | ### Part 2: Create the component function 53 | 54 | * 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. 55 | * Once you complete the component, create a component based on your profile and add it to the DOM. 56 | 57 | ### Part 3: Your Friends 58 | 59 | * 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. 60 | 61 | ### Stretch Goals 62 | 63 | * Instead of manually creating a list of followers, do it programmatically. Create a function that requests the followers data from the API after it has received your data and create a card for each of your followers. Hint: you can chain promises. 64 | 65 | * Look into adding more info as an expanding card. You will need to create some new CSS and a button that expands and contracts the card. 66 | 67 | * Look into adding your GitHub contribution graph. There are a number of different ways of doing this, [this Stack Overflow discussion](https://stackoverflow.com/questions/34516592/embed-github-contributions-graph-in-website) will get you started. 68 | 69 | Note: Just a reminder the stretch goals are just extra practice using the tools we have learned. These are not required. Only parts 1-3 are required portions of the project. If you do not get to the stretch goals, don't worry. 70 | -------------------------------------------------------------------------------- /assets/githublogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/github-usercard/9a2d5e937bc8a4740f86385fad4ddafd3a07a04c/assets/githublogo.png -------------------------------------------------------------------------------- /assets/lambdalogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/github-usercard/9a2d5e937bc8a4740f86385fad4ddafd3a07a04c/assets/lambdalogo.png -------------------------------------------------------------------------------- /example-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/github-usercard/9a2d5e937bc8a4740f86385fad4ddafd3a07a04c/example-preview.png -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | 51 | /* Reset above, our CSS below */ 52 | 53 | html, body, * { 54 | font-family: 'Roboto', sans-serif; 55 | box-sizing: border-box; 56 | } 57 | 58 | html { 59 | font-size: 62.5%; 60 | } 61 | body { 62 | background: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); 63 | } 64 | .container { 65 | max-width: 800px; 66 | margin: 50px auto; 67 | padding: 30px; 68 | display: flex; 69 | flex-direction: column; 70 | align-items: center; 71 | } 72 | 73 | .header { 74 | width: 100%; 75 | display: flex; 76 | justify-content: space-between; 77 | align-items: center; 78 | margin-bottom: 50px; 79 | } 80 | 81 | .header img { 82 | width: 150px; 83 | height: 150px; 84 | } 85 | 86 | .header p { 87 | font-size: 48px; 88 | } 89 | 90 | .cards { 91 | width: 100%; 92 | } 93 | 94 | .card { 95 | width: 100%; 96 | padding: 20px; 97 | display: flex; 98 | border-radius: 5px; 99 | box-shadow: 0 1px 6px -2px #000; 100 | background-color: #FFF; 101 | margin-bottom: 30px; 102 | } 103 | 104 | .card img { 105 | width: 150px; 106 | height: 150px; 107 | border-radius: 3px; 108 | margin-right: 20px; 109 | } 110 | 111 | .card .name { 112 | font-size: 3.4rem; 113 | } 114 | 115 | .card p { 116 | font-size: 1.4rem; 117 | margin-bottom: 3px; 118 | } 119 | 120 | .card .username { 121 | font-size: 1.8rem; 122 | font-style: italic; 123 | margin: 3px 0 10px; 124 | } 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 | Lambda Logo 12 |

❤️'s

13 | GitHub Logo 14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "github-usercard", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "parcel index.html" 6 | }, 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/BloomInstituteOfTechnology/github-usercard.git" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "bugs": { 15 | "url": "https://github.com/BloomInstituteOfTechnology/github-usercard/issues" 16 | }, 17 | "homepage": "https://github.com/BloomInstituteOfTechnology/github-usercard#readme", 18 | "devDependencies": { 19 | "eslint": "^8.10.0", 20 | "parcel-bundler": "^1.12.4" 21 | }, 22 | "dependencies": {} 23 | } 24 | --------------------------------------------------------------------------------