├── .gitattributes ├── LICENSE ├── README.md ├── index.html ├── script.js └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Syknapse 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GitHub User Search app 2 | 3 | [Try it out](https://syknapse.github.io/GitHub-User-Search-app/) Enter GitHub user name and see information about them and their followers. 4 | 5 | [![githubsearchv1](https://user-images.githubusercontent.com/29199184/36611482-dece234a-18d3-11e8-8a20-1647d2242643.gif)](https://syknapse.github.io/GitHub-User-Search-app/) 6 | 7 | Part of [Cassidy Williams](https://twitter.com/cassidoo)'s course [JavaScript and React for Developers](https://www.udemy.com/js-and-react-for-devs/) 8 | 9 | Using the gitHub API to get and display user information with interactive links. 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | GitHub User Search 11 | 12 | 13 |

14 |

GitHub User Search

15 | 16 |

17 | User 18 |

19 |

20 |

21 | Full Name 22 |

23 |

24 |

25 |

26 | Location 27 |

28 |

29 | GitHub Profile 30 |

31 |

32 | Followed by 33 |

34 |

35 |

36 |

37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const input = document.getElementById('user-input'); 2 | 3 | input.addEventListener('keypress', function(event) { 4 | if(event.key === 'Enter'){ 5 | this.blur(); 6 | } 7 | }); 8 | 9 | input.addEventListener('blur', function(event) { 10 | search(); 11 | event.target.style.background = ""; 12 | }); 13 | 14 | input.addEventListener("focus", function(event) { 15 | event.target.style.background = "rgba(240,198,93,0.7)"; 16 | }); 17 | 18 | function search() { 19 | reset() 20 | fetch(`https://api.github.com/users/${input.value}`) 21 | .then(response => response.json()) 22 | .then(json => { 23 | if (json.message == 'Not Found') { 24 | document.getElementById('username').innerText = 'User Not Found'; 25 | } else { 26 | document.getElementById('username').innerText = json.login; 27 | document.getElementById('real-name').innerText = json.name; 28 | document.getElementById('avatar').setAttribute('src', json.avatar_url); 29 | document.getElementById('location').innerText = json.location; 30 | document.getElementById('bio').innerText = json.bio; 31 | document.getElementById('html-url').setAttribute('href', json.html_url); 32 | document.getElementById('followers').innerText = json.followers; 33 | } 34 | }) 35 | fetch(`https://api.github.com/users/${input.value}/followers`) 36 | .then(response => response.json()) 37 | .then(followers => { 38 | for (let i = 0; i < followers.length; i++) { 39 | const followersPanel = document.getElementById('followers-panel'); 40 | let followerDetails = document.createElement('div'); 41 | let followerLink = document.createElement('a'); 42 | let followerName = document.createElement('p'); 43 | let followerAvatar = document.createElement('img'); 44 | 45 | followerName.innerText = followers[i].login; 46 | followerLink.setAttribute('href', followers[i].html_url); 47 | followerLink.setAttribute('target', '_blank'); 48 | followerAvatar.setAttribute('src', followers[i].avatar_url); 49 | followersPanel.appendChild(followerDetails); 50 | followerDetails.appendChild(followerLink); 51 | followerLink.appendChild(followerName); 52 | followerLink.appendChild(followerAvatar); 53 | } 54 | }) 55 | } 56 | 57 | function reset() { 58 | document.getElementById('followers-panel').innerText = ''; 59 | document.getElementById('username').innerText = ''; 60 | document.getElementById('real-name').innerText = ''; 61 | document.getElementById('avatar').setAttribute('src', 'http://via.placeholder.com/462x462/B2FFC9?text=Find+a+GitHub+user'); 62 | document.getElementById('location').innerText = ''; 63 | document.getElementById('bio').innerText = ''; 64 | document.getElementById('html-url').setAttribute('href', ''); 65 | document.getElementById('followers').innerText = ''; 66 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Ubuntu', sans-serif; 3 | font-size: 1.5em; 4 | color: rgb(28, 9, 36); 5 | box-sizing: border-box; 6 | transition: 0.5s; 7 | 8 | background-color: #ff6a95; 9 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23ff6a95' width='11' height='11'/%3E%3Crect fill='%23ff6c93' x='10' width='11' height='11'/%3E%3Crect fill='%23ff6f92' y='10' width='11' height='11'/%3E%3Crect fill='%23ff7190' x='20' width='11' height='11'/%3E%3Crect fill='%23ff748f' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23ff768e' y='20' width='11' height='11'/%3E%3Crect fill='%23ff798c' x='30' width='11' height='11'/%3E%3Crect fill='%23ff7c8b' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%23ff7e8a' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%23ff8189' y='30' width='11' height='11'/%3E%3Crect fill='%23ff8488' x='40' width='11' height='11'/%3E%3Crect fill='%23ff8787' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%23ff8986' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23ff8c86' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23ff8f85' y='40' width='11' height='11'/%3E%3Crect fill='%23ff9185' x='50' width='11' height='11'/%3E%3Crect fill='%23ff9484' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23ff9784' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23ff9a83' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23ff9c83' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23ff9f83' y='50' width='11' height='11'/%3E%3Crect fill='%23ffa283' x='60' width='11' height='11'/%3E%3Crect fill='%23ffa583' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23ffa783' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23ffaa84' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%23ffad84' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%23ffb085' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%23ffb285' x='70' width='11' height='11'/%3E%3Crect fill='%23ffb586' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%23ffb887' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%23ffba88' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%23ffbd89' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23ffbf8a' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23ffc28b' x='80' width='11' height='11'/%3E%3Crect fill='%23ffc58c' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23ffc78e' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23ffca8f' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23ffcc91' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23ffcf93' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23ffd194' x='90' width='11' height='11'/%3E%3Crect fill='%23ffd496' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23ffd698' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23ffd99a' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%23ffdb9c' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%23ffdd9f' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%23ffe0a1' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%23ffe2a3' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%23ffe5a6' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%23ffe7a8' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%23ffe9ab' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23ffebae' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23ffeeb0' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23fff0b3' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23fff2b6' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23fff4b9' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23fff7bc' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23fff9bf' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23fffbc2' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23fffdc5' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23ffffc8' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E"); 10 | background-attachment: fixed; 11 | background-size: cover; 12 | background-position: center; 13 | } 14 | 15 | img { 16 | border: 3px solid rgba(42, 14, 54, 0.986); 17 | border-radius: 15px; 18 | } 19 | 20 | .container { 21 | margin: auto; 22 | max-width: 1200px; 23 | text-align: center; 24 | transition: 0.5s; 25 | display: grid; 26 | grid-template-columns: repeat(6, 1fr); 27 | grid-template-rows: auto auto minmax(100px, auto) minmax(100px, auto) minmax(60px, auto) minmax(60px, auto) minmax(60px, auto) auto; 28 | grid-gap: 15px; 29 | align-items: center; 30 | justify-items: center; 31 | grid-template-areas: 32 | "header header header header header header" 33 | "... input input input input ..." 34 | "avatar avatar avatar username username username" 35 | "avatar avatar avatar real-name real-name real-name" 36 | "html-url html-url ... location location location" 37 | "bio bio bio bio bio bio" 38 | "... ... followers followers ... ..." 39 | "followers-panel followers-panel followers-panel followers-panel followers-panel followers-panel"; 40 | } 41 | 42 | @media screen and (min-width: 1201px) { 43 | body { 44 | /* background-color: unset; */ 45 | } 46 | .container { 47 | /* background-color: rgba(0, 255, 76, 0.2); */ 48 | border: 3px solid rgba(42, 14, 54, 0.986); 49 | border-radius: 15px; 50 | margin: 5px auto; 51 | padding: 5px; 52 | transition: 0.5s; 53 | } 54 | } 55 | 56 | .titles { 57 | color: #292a38; 58 | } 59 | 60 | h1 { 61 | grid-area: header; 62 | } 63 | 64 | input { 65 | grid-area: input; 66 | width:100%; 67 | max-width:500px; 68 | height: 40px; 69 | font-size: 0.9em; 70 | text-align: center; 71 | cursor: text; 72 | border: 2px solid rgba(42, 14, 54, 0.986); 73 | border-radius: 15px; 74 | padding: 2px 5px; 75 | } 76 | 77 | #user-box { 78 | grid-area: username; 79 | justify-self: start; 80 | align-self: end; 81 | text-align: left; 82 | } 83 | 84 | #name-box { 85 | grid-area: real-name; 86 | justify-self: start; 87 | align-self: start; 88 | text-align: left; 89 | } 90 | 91 | #avatar { 92 | grid-area: avatar; 93 | max-width: 100%; 94 | justify-self: start; 95 | } 96 | 97 | #location-box { 98 | grid-area: location; 99 | justify-self: start; 100 | text-align: left; 101 | } 102 | 103 | #bio { 104 | grid-area: bio; 105 | } 106 | 107 | #html-url { 108 | grid-area: html-url; 109 | text-decoration: none; 110 | color: #292a38; 111 | width: 80%; 112 | padding: 2px; 113 | background-color: rgba(0, 34, 255, 0.07); 114 | border: 2px solid rgba(42, 14, 54, 0.986); 115 | border-radius: 20px; 116 | transition: 0.26s; 117 | } 118 | 119 | #html-url:hover { 120 | background-color: rgba(178, 255, 201, 0.8); 121 | } 122 | 123 | #followers-box { 124 | grid-area: followers; 125 | } 126 | 127 | #followers-panel { 128 | grid-area: followers-panel; 129 | display: flex; 130 | flex-wrap: wrap; 131 | justify-content: space-evenly; 132 | } 133 | 134 | #followers-panel p { 135 | color: #292a38; 136 | font-size: 0.8em; 137 | } 138 | 139 | #followers-panel img { 140 | width: 20vw; 141 | max-width: 250px; 142 | border: 2px solid rgba(42, 14, 54, 0.986); 143 | } 144 | 145 | #followers-panel div { 146 | border: 2px solid rgba(42, 14, 54, 0.986); 147 | border-radius: 15px; 148 | background-color: rgba(0, 34, 255, 0.07); 149 | margin: 3px; 150 | padding: 3px; 151 | } 152 | 153 | #followers-panel a { 154 | height: 100%; 155 | text-decoration: none; 156 | color: inherit; 157 | } 158 | 159 | #followers-panel div:hover { 160 | background-color: rgba(178, 255, 201, 0.8); 161 | } 162 | 163 | footer { 164 | text-align: center; 165 | margin: 20px auto 25px auto; 166 | font-size: 0.9em; 167 | } 168 | 169 | footer a { 170 | text-decoration: none; 171 | color: #292a38; 172 | } 173 | 174 | footer a:hover { 175 | background-color: rgba(178, 255, 201, 0.8); 176 | } 177 | 178 | @media screen and (max-width: 450px) { 179 | body { 180 | background-image: unset; 181 | background: rgba(255,106,149,1); 182 | background: -moz-linear-gradient(top, rgba(255,106,149,1) 0%, rgba(241,111,92,1) 54%, rgba(240,198,93,1) 100%); 183 | background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,106,149,1)), color-stop(54%, rgba(241,111,92,1)), color-stop(100%, rgba(240,198,93,1))); 184 | background: -webkit-linear-gradient(top, rgba(255,106,149,1) 0%, rgba(241,111,92,1) 54%, rgba(240,198,93,1) 100%); 185 | background: -o-linear-gradient(top, rgba(255,106,149,1) 0%, rgba(241,111,92,1) 54%, rgba(240,198,93,1) 100%); 186 | background: -ms-linear-gradient(top, rgba(255,106,149,1) 0%, rgba(241,111,92,1) 54%, rgba(240,198,93,1) 100%); 187 | background: linear-gradient(to bottom, rgba(255,106,149,1) 0%, rgba(241,111,92,1) 54%, rgba(240,198,93,1) 100%); 188 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6a95', endColorstr='#f0c65d', GradientType=0 ); 189 | transition: 0.5s; 190 | } 191 | h1 { 192 | font-size: 1.4em; 193 | } 194 | .container { 195 | grid-template-columns: 1fr; 196 | grid-template-rows: auto; 197 | grid-template-areas: 198 | "header" 199 | "input" 200 | "username" 201 | "real-name" 202 | "avatar" 203 | "location" 204 | "html-url" 205 | "bio" 206 | "followers" 207 | "followers-panel"; 208 | } 209 | input { 210 | min-width: 170px; 211 | } 212 | #user-box { 213 | justify-self: center; 214 | align-self: unset; 215 | text-align: unset; 216 | } 217 | #name-box { 218 | justify-self: center; 219 | align-self: unset; 220 | text-align: unset; 221 | } 222 | #avatar { 223 | justify-self: center; 224 | } 225 | #location-box { 226 | justify-self: center; 227 | text-align: unset; 228 | } 229 | } --------------------------------------------------------------------------------