DEV Community

Cover image for Github Profile Data Fetch Using Github User Api
Technical Vandar
Technical Vandar

Posted on

8 2

Github Profile Data Fetch Using Github User Api

How IT Works:

It have a input field and a button when we enter github profile and click on button it fetch github User Api and get avatar, name, bio, followers, following you can see also source Code Below



Source Code:

HTML CODE:


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Github Profile Fetch Api</title>
</head>
<body>
    <div class="container">
        <div class="search-area">
            <input type="text" name="" id="username" placeholder="Enter Github Username" autocomplete="off">
            <button onclick="getDetails();">Get Details</button>
        </div>
        <div class="output-container" id="output">
            <div class="profile" id="profile"></div>
            <div class="username">
                <h1 id="name"></h1>
            </div>
            <div class="bio">
                <p id="bio"></p>
            </div>
            <div class="info">
                <ul>
                    <li id="followers"></li>
                    <li id="following"></li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    function getDetails(){
        document.getElementById('output').style.display="block";
        const name=document.getElementById('username').value;
        fetch(`https://api.github.com/users/${name}`)
        .then(response=>response.json().then(data=>{
            console.log(data)
            document.getElementById('name').innerHTML=data.name;
            document.getElementById('bio').innerHTML=data.bio;
            document.getElementById('followers').innerHTML=data.followers +" Followers";
            document.getElementById('following').innerHTML=data.following + " Following";
            document.getElementById('profile').innerHTML=`
            <img src="${data.avatar_url}" />
            `
        }))
    }
</script>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;}
body{
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    background: #140d35;
}
.search-area{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 750px;
    background: rgb(0, 140, 255);
    border-radius: 10px;
}
.search-area input{
    height: 45px;
    width: 550px;
    font-size: 18px;
    outline: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: 650;
}
.search-area button{
    height: 45px;
    width: 150px;
    font-weight: 750;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    outline: none;
    margin: 0 0 0 10px;
}
.output-container{
    height: 300px;
    width: 750px;
    background: #0e2563;
    margin: 15px 0 0 0;
    border-radius: 10px;
}
img{
    margin-left: 15px;
    position: absolute;
    margin-top: 15px;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 15px solid rgb(0, 140, 255);
}

.username h1{
    position: absolute;
    margin-top: 15px;
    margin-left: 245px;
    font-weight: 750;
    color: white;
}
.bio p{
    font-size: 20px;
    font-weight: 600;
    margin-left: 245px;
    width: 500px;
    color: white;
    margin-top: 75px;
    position: absolute;
}
.info ul{
    position: absolute;
    margin-top: 175px;
    margin-left: 245px;
    color: white;
    display: flex;
}
ul li{font-weight: 650;
    color: white;
    letter-spacing: 2px;
    margin: 15px;
    padding: 5px 15px;
    background: #687fbd;
    list-style: none;
}
#output{
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

Youtube Tutorial:

Click Here


Find Me On:

Facebook
Youtube
Github

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs