ADVERTISEMENT

Create Github Username Search Using JavaScript

Telegram Group Join Now

ADVERTISEMENT

Create GitHub Username Search Using JavaScript

Welcome to Code With Random blog. In this blog, we learn how to create a GitHub Username Search We use HTML & CSS and javascript for this GitHub Username Search.

ADVERTISEMENT

ADVERTISEMENT

 

Code by N/A
Project Download Link Available Below
Language used HTML ,CSS and JavaScript
External link / Dependencies Yes
Responsive Yes
Github Username Search Using JavaScript Table

Hope you enjoy our blog so let’s start with a basic HTML structure for the GitHub Username Search.

ADVERTISEMENT

HTML code for GitHub Username Search

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Github Profiles</title>
    </head>
    <body>
        <form class="user-form" id="form">
            <input
                type="text"
                id="search"
                autocomplete="off"
                placeholder="Search a Github User"
            />
        </form>
        <main id="main"></main>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"
            integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ=="
            crossorigin="anonymous"
        ></script>
        <script src="app.js"></script>
    </body>
</html>

 

ADVERTISEMENT

There is all HTML code for the Github Profile search. Now, you can see output without CSS, then we write CSS for our Github Profile search.

100+ Front-end Projects for Web developers (Source Code)

output

ADVERTISEMENT

Github Profile search | Github Profile search using html css javascript
 

 

CSS for Github Profile search

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #2a2a72;
color: #fff;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.user-form {
width: 100%;
max-width: 700px;
}
.user-form input {
width: 100%;
display: block;
background-color: #4c2885;
border: none;
border-radius: 10px;
color: #fff;
padding: 1rem;
margin-bottom: 2rem;
font-family: inherit;
font-size: 1rem;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1);
}
.user-form input::placeholder {
color: #bbb;
}
.user-form input:focus {
outline: none;
}
.card {
max-width: 800px;
background-color: #4c2885;
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;
margin: 0 1.5rem;
}
.avatar {
border-radius: 50%;
border: 10px solid #2a2a72;
height: 150px;
width: 150px;
}
.user-info {
color: #eee;
margin-left: 2rem;
}
.user-info h2 {
margin-top: 0;
}
.user-info ul {
list-style-type: none;
display: flex;
justify-content: space-between;
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 {
text-decoration: none;
color: #fff;
background-color: #212a72;
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
display: inline-block;
}
@media (max-width: 500px) {
.card {
flex-direction: column;
align-items: center;
}
.user-form {
max-width: 400px;
}
}

Now we have completed our CSS section,  Here is our updated output CSS.

output

ADVERTISEMENT

Github Profile search | Github Profile search using html css javascript
 

 

ADVERTISEMENT

Now add javascript for the search user and implement GitHub user search API.

Javascript for Github Profile search

 const APIURL = 'https://api.github.com/users/'
const main = document.getElementById('main')
const form = document.getElementById('form')
const search = document.getElementById('search')
async function getUser(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')
}
}
}
async function getRepos(username) {
try {
const { data } = await axios(APIURL + username + '/repos?sort=created')
addReposToCard(data)
} catch(err) {
createErrorCard('Problem fetching repos')
}
}
function createUserCard(user) {
const userID = user.name || user.login
const userBio = user.bio ? `<p>${user.bio}</p>` : ''
const cardHTML = `
<div class="card">
<div>
<img src="${user.avatar_url}" alt="${user.name}" class="avatar">
</div>
<div class="user-info">
<h2>${userID}</h2>
${userBio}
<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>
</div>
</div>
`
main.innerHTML = cardHTML
}
function createErrorCard(msg) {
const cardHTML = `
<div class="card">
<h1>${msg}</h1>
</div>
`
main.innerHTML = cardHTML
}
function addReposToCard(repos) {
const reposEl = document.getElementById('repos')
repos
.slice(0, 5)
.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 = ''
}
})

Final output

Github Profile search | Github Profile search using html css javascript
 

 

Now we have completed our javascript section,  Here is our updated output with javascript. Hope you like A Github Profile search, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

10+ Javascript Project Ideas For Beginners( Project Source Code)

In this post, we learn how to create a Github Profile search using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Written by – Code With Random/Anki 

ADVERTISEMENT

Which code editor do you use for this Github Username Search coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this is a responsive project

ADVERTISEMENT

Do you use any external links to create this project?

Yes!

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT