Hello Guys! Welcome to Coding Torque. In this blog, we are going to create a GitHub Profile Searcher using HTML, CSS and JavaScript. We are going to use JavaScript fetchAPI and GitHub users API to fetch user details by their username. You should create this project if you are an intermediate-level JavaScript developer.
Before we start, here are some more JavaScript projects for you to practice:
1. Filter Cards using JavaScript
2. Dictionary App using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tip Calculator using JavaScript
5. QR Code Generator using JavaScript
I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.
Demo
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>GitHub Profile Search using JavaScript - @code.scientist x @codingtorque</title>
</head>
<body>
<!-- Further Code here -->
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag
<div class="container">
<h1>GitHub Account Searcher</h1>
<div class="searchContainer">
<input type="text" id="searchInput" placeholder="Enter GitHub Username" />
<button onclick="fetchGithubUser()">Search</button>
</div>
<div class="detailsContainer" id="userDetails">
</div>
</div>Output Till Now
CSS Code
Create a file style.css and paste the code
below.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #131d2f;
color: white;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
padding: 30px 30px;
border-radius: 10px;
width: 40rem;
}
.searchContainer {
background: #1e2b48;
padding: 10px 10px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.searchContainer input {
background-color: transparent;
border: none;
width: 80%;
outline: none;
color: white;
font-size: 15px;
}
.searchContainer button {
background-color: #007bff;
color: white;
padding: 5px 10px;
border: none;
border-radius: 8px;
}
.detailsContainer {
margin-top: 20px;
border-radius: 10px;
background: #1e2b48;
padding: 20px 25px;
}
.profile {
display: flex;
}
.profile-image {
height: 120px;
width: 120px;
border-radius: 50%;
overflow: hidden;
}
.profile-image-icon {
height: 100%;
width: 100%;
}
.profile-details {
padding: 10px;
width: 25rem;
}
.username {
font-size: 13px;
color: #007bff;
}
.bio {
font-size: 14px;
margin-top: 10px;
}
.stats {
background: #141d2e;
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px 0;
margin-top: 20px;
text-align: center;
border-radius: 10px;
}
.media {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.media p {
width: 50%;
display: flex;
align-items: center;
}
.media-name {
color: gainsboro;
font-size: 14px;
margin-left: 4px;
} Output Till Now
JavaScript Code
Create a file script.js and paste the code
below.
const fetchGithubUser = async () => {
let username = document.getElementById("searchInput").value;
const response = await fetch(`https://api.github.com/users/${username}`);
const data = await response.json();
if (data.message == "Not Found") {
alert(data.message);
} else {
document.getElementById("userDetails").innerHTML = `
<div class="profile">
<div class="profile-image">
<img class="profile-image-icon" src="${data.avatar_url}" />
</div>
<div class="profile-details">
<h2 class="name">${data.name}</h2>
<p class="username">@${data.login}</p>
<p class="bio">${data.bio ? data.bio : 'This account don\'t have bio'}</p>
<div class="stats">
<div>
<div class="stats-name">Public Repos</div>
<div class="stats-name">${data.public_repos}</div>
</div>
<div>
<div class="stats-name">Followers</div>
<div class="stats-name">${data.followers}</div>
</div>
<div>
<div class="stats-name">Following</div>
<div class="stats-name">${data.following}</div>
</div>
</div>
<div class="media">
<p>
<span class="media-icon">
<i class="fas fa-map-marker-alt"></i>
</span>
<span class="media-name">${data.location ? data.location : 'Not Available'}</span>
</p>
<p>
<span class="media-icon">
<i class="fas fa-link"></i>
</span>
<span class="media-name">${data.blog ? data.blog : 'Not Available'}</span>
</p>
<p>
<span class="media-icon">
<i class="fab fa-twitter"></i>
</span>
<span class="media-name">${data.twitter_username ? data.twitter_username : 'Not Available'}</span>
</p>
<p>
<span class="media-icon">
<i class="fas fa-building"></i>
</span>
<span class="media-name">${data.company ? data.company : 'Not Available'}</span>
</p>
</div>
</div>
</div>
`;
}
}
Follow our Telegram Group for more Join Telegram
If you have any doubts or any project ideas feel free to Contact
Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like
this👨💻