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>
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;
}
Top comments (0)