How it works?

1. HTML Structure

<input id="username" placeholder="Enter GitHub username"> <button onclick="getUser()">Search</button> <div id="userInfo"></div>

User enters GitHub username in the input field. When the button is clicked it runs a JavaScript function called getUser(). The result will appear inside the userInfo div.

2. JavaScript Code

function getUser(){ const username = document.getElementById("username").value fetch(`https://api.github.com/users/${username}`) .then(response => response.json()) .then(data => { document.getElementById("userInfo").innerHTML = ` <h2>${data.login}</h2> <img src="${data.avatar_url}" width="100"> <p>Followers: ${data.followers}</p> ` }) }

JavaScript takes the username from the input field. Then it sends a request to the GitHub API using fetch(). The API returns user data in JSON format. Finally JavaScript displays the data on the website.

3. API Request

https://api.github.com/users/USERNAME

This is the GitHub API endpoint. When we replace USERNAME with a real username the API returns data about that user.

API For GitHub

{ "login": "octocat",
"id": 1,
"node_id": "MDQ6VXNlcjE=",
"avatar_url": "https://github.com/images/error/octocat_happy.gif",
"gravatar_id": "",
"url": "https://api.github.com/users/octocat",
"html_url": "https://github.com/octocat",
"followers_url": "https://api.github.com/users/octocat/followers",
"following_url": "https://api.github.com/users/octocat/following{/other_user}",
"gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
"starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
"organizations_url": "https://api.github.com/users/octocat/orgs",
"repos_url": "https://api.github.com/users/octocat/repos",
"events_url": "https://api.github.com/users/octocat/events{/privacy}",
"received_events_url": "https://api.github.com/users/octocat/received_events",
"type": "User",
"site_admin": false,
"name": "monalisa octocat",
"company": "GitHub",
"blog": "https://github.com/blog",
"location": "San Francisco",
"email": "octocat@github.com",
"hireable": false,
"bio": "There once was...",
"twitter_username": "monatheoctocat",
"public_repos": 2,
"public_gists": 1,
"followers": 20,
"following": 0,
"created_at": "2008-01-14T04:33:35Z",
"updated_at": "2008-01-14T04:33:35Z",
"private_gists": 81,
"total_private_repos": 100,
"owned_private_repos": 100,
"disk_usage": 10000,
"collaborators": 8,
"two_factor_authentication": true,
"plan": {
"name": "Medium",
"space": 400,
"private_repos": 20,
"collaborators": 0
}}