An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Some of Our Sources
- Engadget
- Pearsonified
- Spoon Graphics
- Six Revisions
- Web Designer Depot
- Noupe
- CSS Globe
- Stylized Web
- Freelance Switch
- Willems Lab
Help Webnuz
Referal links:
September 24, 2021 03:31 pm GMT
Original Link: https://dev.to/technicalvandar885/github-profile-data-fetch-using-github-user-api-512i
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>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;}Youtube Tutorial:
Find Me On:
Original Link: https://dev.to/technicalvandar885/github-profile-data-fetch-using-github-user-api-512i
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To