GitHub is a popular platform for managing and sharing code. It is a go-to platform for many developers, and it also provides an API for developers to interact with GitHub programmatically. In this blog, we will look at how to use the GitHub Users API to get user information using JavaScript and HTML.
We will be using JavaScript to make requests to the GitHub Users API and to display the information on a webpage. Specifically, we will be using the Axios library to make requests to the API and DOM manipulation to display the results on the webpage.
To get started, we will need to create an HTML file with a form element that allows the user to input a GitHub username. We will also need a div with an id of “main” to display the user’s information. Here is an example of the HTML:
<!DOCTYPE html>
<html>
<head>
<title>GitHub Users API Example</title>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
</head>
<body>
<form id=”form”>
<input type=”text” id=”search” placeholder=”Enter a GitHub username” />
<button type=”submit”>Search</button>
</form>
<div id=”main”></div>
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
<script src=”index.js”></script>
</body>
</html>
Notice that we have included the Axios library from a CDN in the head of the HTML file. We will be using this library to make requests to the GitHub Users API.
Now, let’s take a look at the JavaScript code. The first thing we need to do is define the URL for the GitHub Users API. We will also define a reference to the “main” div and the “search” input element:
const APIURL = “https://api.github.com/users/”;
const main = document.getElementById(“main”);
const form = document.getElementById(“form”);
const search = document.getElementById(“search”);
Next, we will define a function that creates a card with user information. The function takes a user object as a parameter and constructs HTML code to display the user’s information:
const createUserCard = (user) => {
const userID = user.name || user.login;
const userBio = user.bio ? `<p>${user.bio}</p>` : “”;
const cardHTML = `
<div class=”card”>
<div class=”img”>
<div class=”banner”></div>
<img src=”${user.avatar_url}” class=”avatar” alt=”${user.name}”/>
</div>
<div class=”user-info”>
<h2>${userID}</h2>
<p>${userBio}</p>
<ul>
<li>${user.followers}<strong>Followers</strong></li>
<li>${user.following}<strong>Following</strong></li>
<li>${user.public_repos}<strong>Repos</strong></li>
</ul>
<div id=”repos”></div>
<a href=”https://github.com/${user.login}” target=”_blank” class=”follow”>View profile</a>
</div>
</div>
`;
main.innerHTML = cardHTML;
};
The function takes a user object as a parameter, and it constructs an HTML code to display the user’s information. It then sets the innerHTML of the “main” div to the HTML code.
We will also define a function that creates an error card. This function takes a message as a parameter and constructs HTML
// Generate card error function
const createErrorCard = (msg) => {
const cardHTML = `
<div class=”card error”>
<h1>${msg}</h1>
</div>
`;
main.innerHTML = cardHTML;
};
Next, we define a function to add repositories to the user card. This function takes an array of repositories as a parameter and creates an HTML element for each repository. It then appends each repository element to the “repos” div inside the user card.
const addReposToCard = (repos) => {
const reposEl = document.getElementById(“repos”);
repos.slice(0, 10).forEach((repo) => {
const repoEl = document.createElement(“a”);
repoEl.classList.add(“repo”);
repoEl.href = repo.html_url;
repoEl.target = “_blank”;
repoEl.innerText = repo.name;
reposEl.appendChild(repoEl);
});
};
We also define a function to get a user’s repositories. This function takes a username as a parameter and makes a GET request to the GitHub API to retrieve the user’s repositories. It then calls the addReposToCard function to add the repositories to the user card.
const getRepos = async (username) => {
try {
const { data } = await axios(`${APIURL + username}/repos?sort=created`);
addReposToCard(data);
} catch (err) {
createErrorCard(“Problem fetching repos”);
}
};
Finally, we define a function to get a user. This function takes a username as a parameter and makes a GET request to the GitHub API to retrieve the user’s information. If the request is successful, it calls the createUserCard function to create the user card HTML and sets the innerHTML of the “main” div to the HTML code. It then calls the getRepos function to retrieve and add the user’s repositories to the user card. If the request fails, it calls the createErrorCard function to create an error card and display the error message.
const getUser = async (username) => {
try {
const { data } = await axios(APIURL + username);
createUserCard(data);
getRepos(username);
} catch (err) {
if (err.response.status === 404) {
createErrorCard(“No profile with this username”);
}
}
};
We also add an event listener to the form element that listens for a form submission event. When the event is triggered, it prevents the default form submission behavior, retrieves the value of the input field, calls the getUser function with the input value, and clears the input field.
form.addEventListener(“submit”, (e) => {
e.preventDefault();
const user = search.value;
if (user) {
getUser(user);
search.value = “”;
}
});
Overall, this code demonstrates how to use the GitHub Users API to retrieve and display user information and repositories using JavaScript and HTML.