Hello Readers, Welcome to Bijan's Blog Today in this article you will learn how to Create a GitHub Username Search with JavaScript.As you can see a Create a GitHub Username Search with JavaScript project image on the top of the article.
Github is a popular platform for developers to share and collaborate on their code. One of the features that Github offers is the ability to search for users by their username. In this article, we will be creating a simple Github username search using JavaScript. This guide will walk you through the process of creating a search function that allows users to search for Github users by their username.
You might know:
Creating a Github Username Search with JavaScript (Source Code)
Lets, Start…
First You need to create three files to create a GitHub Username Search Projects. HTML, CSS & JAVASCRIPT with the extension to .html , .css , .js. also you can easily download source code below.
The first step in creating our Github Username Search is to set up the HTML. This will include a form for the user to enter their search query and a section to display the search results.
First, create a form element with an input field for the search query and a submit button. Give the input field an id so that we can reference it in our JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GitHub Username Search</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<form id="form">
<input type="text" id="search" placeholder="Search a Github User" />
</form>
<main id="main"></main>
</body>
</html>
Second, Design a Page which is display in a webpage. Design html file with a good look user friendly.
@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #2e2a68 74%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
}
input {
background-color: #4c2885;
border-radius: 10px;
border: none;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1);
color: white;
font-family: inherit;
font-size: 1rem;
padding: 1rem;
margin-bottom: 2rem;
}
input::placeholder {
color: #bbb;
}
input:focus {
outline: none;
}
.card {
background-color: #4c2885;
background-image: linear-gradient(315deg, #4c2885 0%, #4c11ac 100%);
border-radius: 20px;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1);
display: flex;
padding: 3rem;
max-width: 800px;
}
.avatar {
border: 10px solid #2a2a72;
border-radius: 50%;
height: 150px;
width: 150px;
}
.user-info {
color: #eee;
margin-left: 2rem;
}
.user-info h2 {
margin-top: 0;
}
.user-info ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding: 0;
max-width: 400px;
}
.user-info ul li {
display: flex;
align-items: center;
}
.user-info ul li strong {
font-size: 0.9rem;
margin-left: 0.5rem;
}
.repo {
background-color: #2a2a72;
border-radius: 5px;
display: inline-block;
color: white;
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-decoration: none;
}
Finally, Add the JavaScript that will handle the search functionality. We will use the Fetch API to make a GET request to the Github API to retrieve the search results.
const APIURL = "https://api.github.com/users/";
const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");
getUser("codewithzan");
async function getUser(username) {
const resp = await fetch(APIURL + username);
const respData = await resp.json();
createUserCard(respData);
getRepos(username);
}
async function getRepos(username) {
const resp = await fetch(APIURL + username + "/repos");
const respData = await resp.json();
addReposToCard(respData);
}
function createUserCard(user) {
const cardHTML = `
<div class="card">
<div>
<img class="avatar" src="${user.avatar_url}" alt="${user.name}" />
</div>
<div class="user-info">
<h2>${user.name}</h2>
<p>${user.bio}</p>
<ul class="info">
<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>
</div>
</div>
`;
main.innerHTML = cardHTML;
}
function addReposToCard(repos) {
const reposEl = document.getElementById("repos");
repos
.sort((a, b) => b.stargazers_count - a.stargazers_count)
.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);
});
}
form.addEventListener("submit", (e) => {
e.preventDefault();
const user = search.value;
if (user) {
getUser(user);
search.value = "";
}
});
And that's it! We now have a working Github Username Search using JavaScript. You can further improve this by adding more features such as pagination and error handling.
Conclusion
In this article, we have created a simple Github username search using JavaScript. By using the Fetch API and the Github API, we were able to retrieve search results and display them to the user. This guide should provide a good starting point for creating your own Github username search or other similar projects. Remember to always check the Github API documentation for the most up-to-date information and usage guidelines.
Thanks for reading: Creating a Github Username Search with JavaScript,I hope you enjoy it follow for more...:)