How to Create a GitHub Profile Search using HTML CSS and JavaScript ? (original) (raw)
Last Updated : 21 Apr, 2025
In this article, we will be developing an interactive **GitHub Profile Search application using HTML, CSS, and JavaScript Language. In this application, there is a search bar where users can enter the username that they want to view. After entering the username, an API call is been triggered, and the details of the inputted user are returned to the user along with the repositories.
Project Preview:
Prerequisites
Approach
- Create the GitHub Profile Search layout and structure using HTML tags. We have used the tag to take the input from the user.
- The entire styling of the application is done through the CSS file. All the colors, card layout, alignment, and heading are managed through the CSS file.
- In JavaScript code, we define the API URL and axioms script in the variables, and then we store the reference of HTML elements like the search bar and in variables.
- The user-defined function named "**userGetFunction" makes an API call by taking the username as the parameter and also catches the error in case of profile is not present.
- Then **repoGetFunction is used to fetch the repos of the user searched through the search bar.
- All this information is displayed in the attractive card component using the function "**userCard".
- In the "**repoCardFunction", the repositories which are fetched can be visited by clicking on the repo. We are fetching and displaying 5 repositories of the user in the card.
**Example: This example describes the basic implementation of the Github Profile Search application using HTML, CSS, and Javascript.
HTML `
GeeksforGeeks GithubGeeksforGeeks Github
CSS
/* styles.css */ @import url( "https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
- { box-sizing: border-box; margin: 0; padding: 0; } form { margin: auto; max-width: 50%; margin-bottom: 20px; } h1 { color: #00a136; font-size: 2.5rem; margin: auto; text-align: center; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease-in-out;
} h1:hover { transform: scale(1.1); }
.inputForm input { width: 80%; margin: auto; margin-top: 20px; display: block; background-color: #f0e1c6; border: 2px solid #00a136; border-radius: 7px; color: #333; font-weight: bold; padding: 10px; } .inputForm input::placeholder { color: #666; font-weight: bold; } .inputForm input:focus { outline: none; border-color: #007bff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .card { max-width: 50%; background-color: rgb( 141, 240, 243 ); border-radius: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); display: flex; padding: 2rem; margin: auto; } .avatar { border-radius: 50%; border: 4px solid #00a136; height: 150px; width: 150px; transition: transform 0.3s ease-in-out; } .avatar:hover { transform: scale(1.1); } .user-info { color: #333; margin-left: 2rem; padding: 1rem; background-color: rgba( 255, 255, 255, 0.9 ); border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .user-info h2 { margin-top: 0; font-size: 1.5rem; color: #007bff; } .user-info p { font-size: 1rem; margin-top: 0.5rem; } .user-info ul { list-style-type: none; display: flex; justify-content: space-between; padding: 0; max-width: 400px; margin-top: 1rem; } .user-info ul li { display: flex; align-items: center; } .user-info ul li strong { font-size: 0.9rem; margin-left: 0.5rem; color: #007bff; } .repo { text-decoration: none; color: #fff; background-color: #ff1500; font-size: 0.9rem; padding: 0.4rem 0.8rem; margin-right: 0.5rem; margin-bottom: 0.5rem; display: inline-block; border-radius: 9px; transition: background-color 0.3s, transform 0.2s; } .repo:hover { background-color: #cc0c00; transform: scale(1.05); } @media (max-width: 500px) { .card { flex-direction: column; align-items: center; } .inputForm { max-width: 400px; } }
` JavaScript ``
// script.js
let api = "https://api.github.com/users/";
let fetch =
document.createElement("script");
fetch.src =
https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js;
fetch.integrity =
ha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==;
fetch.crossOrigin = "anonymous";
document.head.appendChild(fetch);
let main =
document.getElementById("main");
let inputForm =
document.getElementById("userInput");
let inputBox =
document.getElementById("inputBox");
const userGetFunction = (name) => {
axios(api + name)
.then((response) => {
userCard(response.data);
repoGetFunction(name);})
.catch((err) => {
if (
err.response.status ==
404) {
errorFunction(
"No profile with this username");}});}
const repoGetFunction = (name) => {
axios(
api +
name +
"/repos?sort=created")
.then((response) => {
repoCardFunction(
response.data);})
.catch((err) => {
errorFunction(
"Problem fetching repos");});}
const userCard = (user) => {
let id = user.name || user.login;
let info = user.bio
? <p>${user.bio}</p>: "";
let cardElement = `
${id}
${info}- ${user.followers} Followers
- ${user.following} Following
- ${user.public_repos} Repos
const errorFunction = (error) => { let cardHTML = `
${error}
const repoCardFunction = (repos) => { let reposElement = document.getElementById( "repos"); for (let i = 0; i < 5 && i < repos.length; i++) { let repo = repos[i]; let repoEl = document.createElement("a"); repoEl.classList.add("repo"); repoEl.href = repo.html_url; repoEl.target = "_blank"; repoEl.innerText = repo.name; reposElement.appendChild(repoEl);}} inputForm.addEventListener("submit", (e) => { e.preventDefault(); let user = inputBox.value; if (user) { userGetFunction(user); inputBox.value = "";}});
``
**Output: