├── ss.png ├── github-logo.png ├── script.js ├── index.html └── style.css /ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/GITHHUB-PROFILE-FINDER/HEAD/ss.png -------------------------------------------------------------------------------- /github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/GITHHUB-PROFILE-FINDER/HEAD/github-logo.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // API USED => https://api.github.com/user/user_name 2 | 3 | 4 | let input_user = document.querySelector("#input"); 5 | 6 | const userImg = document.querySelector(".main-info"); 7 | // const name = document.querySelector("#name"); 8 | // const userName =document.querySelector("#username"); 9 | const bio = document.querySelector("#bio") 10 | const repos = document.querySelector("#repo"); 11 | const followers = document.querySelector("#followers"); 12 | const following = document.querySelector("#following"); 13 | 14 | const fetchUser = (user_name) => { 15 | fetch(`https://api.github.com/users/${user_name}`) 16 | .then((data) => data.json()) 17 | .then((jsonData) => { 18 | 19 | if (jsonData.message == "Not found") { 20 | alert("User Not Found"); 21 | return; 22 | // console.log("Error" + jsonData.message); 23 | } else { 24 | userImg.innerHTML = ` 25 | avatar 26 | ${jsonData.name} 27 | @${jsonData.login} 28 | `; 29 | bio.innerHTML = jsonData.bio; 30 | repos.innerHTML = jsonData.public_repos; 31 | followers.innerHTML = jsonData.followers; 32 | following.innerHTML = jsonData.following; 33 | } 34 | 35 | }) 36 | .catch((err) => { 37 | console.log("Catch" + err.message); 38 | }); 39 | } 40 | 41 | const getUser = () => { 42 | let user_name = input_user.value.trim(); 43 | // trim will replace before and after spaces 44 | 45 | if (user_name.length == 0) { 46 | alert("Please enter a valid github username"); 47 | } else { 48 | fetchUser(user_name) 49 | } 50 | 51 | input_user.value = " "; 52 | 53 | } 54 | 55 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GithHub profile Finder 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 | 26 |
27 |
28 | avatar 29 | Ranzo-raju 30 | 31 |
32 |
33 |

A full stack developer

34 |

23 Repositories

35 |
36 | 46 |
47 |
48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background: url("https://img2.pngio.com/github-on-the-hunt-for-a-new-diversity-lead-developers-techworld-github-universe-png-800_450.png"); 9 | background-repeat: no-repeat; 10 | background-size: cover; 11 | background-attachment: fixed; 12 | } 13 | .container{ 14 | width: 100%; 15 | 16 | } 17 | 18 | .search-container{ 19 | position: relative; 20 | width: 550px; 21 | height: 50px; 22 | background-color: #fff; 23 | /* margin-bottom: 30px; */ 24 | border-radius: 15px; 25 | overflow: hidden; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | flex-direction: column; 30 | margin: 0 auto; 31 | margin-top: 50px; 32 | box-shadow: 0 3px 10px gray; 33 | } 34 | 35 | #input{ 36 | width: 100%; 37 | height: 100%; 38 | background-color: #fff; 39 | border: none; 40 | outline: none; 41 | padding: 5px 160px 5px 15px; 42 | box-sizing: border-box; 43 | } 44 | 45 | #search{ 46 | width: 160px; 47 | height: 100%; 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | display: flex; 52 | justify-content: center; 53 | align-items: center; 54 | background-color: #000; 55 | color : white; 56 | cursor: pointer; 57 | text-transform: uppercase; 58 | } 59 | 60 | .profile-card{ 61 | 62 | width: 500px; 63 | background-color: rgba(255,255,255,0.6); 64 | margin: 0 auto; 65 | margin-top: 30px; 66 | border-radius: 15px; 67 | overflow: hidden; 68 | margin-bottom: 15px; 69 | box-shadow: 0 3px 10px gray; 70 | font-family: 'Lobster Two', cursive; 71 | } 72 | 73 | 74 | .main-info{ 75 | display: flex; 76 | flex-direction: column; 77 | align-items: center; 78 | border-bottom: 1px solid gray; 79 | } 80 | 81 | #prof-img{ 82 | height: 70px; 83 | width: auto; 84 | border-radius: 50%; 85 | margin: 10px 0; 86 | box-shadow: 0 3px 10px gray; 87 | } 88 | 89 | .name{ 90 | margin-top: 15px; 91 | font-size: 25px; 92 | } 93 | 94 | #username{ 95 | font-size: 20px; 96 | text-decoration: none; 97 | margin-top: 5px; 98 | margin-bottom: 8px; 99 | } 100 | 101 | a{ 102 | text-decoration: none; 103 | } 104 | 105 | .bio{ 106 | width: 100%; 107 | text-align: center; 108 | padding: 20px 0; 109 | font-size: 23px; 110 | } 111 | 112 | #bio{ 113 | font-weight: bold; 114 | color: rgb(28, 99, 109); 115 | } 116 | 117 | p{ 118 | margin-top: 12px; 119 | } 120 | 121 | .follow{ 122 | width: 100%; 123 | display: flex; 124 | height: 60px; 125 | border-top: 1px solid grey ; 126 | font-size: 20px; 127 | } 128 | 129 | .follow div{ 130 | width: 50%; 131 | text-align: center; 132 | padding-top: 15px; 133 | } 134 | 135 | .followers{ 136 | border-right: 1px solid grey; 137 | } 138 | 139 | @media screen and (max-width: 600px){ 140 | .profile-card{ 141 | width: 450px; 142 | margin: 0 45px; 143 | margin-top: 30px; 144 | border-radius: 15px; 145 | overflow: hidden; 146 | margin-bottom: 15px; 147 | box-shadow: 0 3px 10px gray; 148 | font-family: 'Lobster Two', cursive; 149 | } 150 | } 151 | 152 | 153 | --------------------------------------------------------------------------------