DEV Community

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

Posted on

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

Top comments (0)