Introduction
GitHub is a very essential platform in the process of software development, be it for open-source software, private tools, continuous integration, or any of its many other use cases. In this guide, you’ll learn how to use the fetch API with the GitHub Application
n Programming Interface.
Understanding the API
Before you make a request to any API, you need to figure out which endpoints are exposed by the provider. In this case, GitHub provides endpoints for search, repositories, projects, markdowns, users, and many more. Find out more in Github’s official docs. In this guide, you will only make use of the /users endpoint. All requests to the API are supposed to be made to the root endpoint https://api.github.com.
An Introduction to Fetch
The fetch API provides a JavaScript interface for accessing and manipulating requests and responses over a network. This is provided via the global window.fetch() method in the browser.
Using Fetch
Now that you have a fair idea of where your request would be made and the structure of the data you would be getting, you can now
make a request to the API with your code comfortably.
A fetch request is shown below:
fetch(URL, init:{method: 'GET', headers:{}, body}) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error)); // URL - Url of the resource // Headers - Headers for the request( Content-Type, ...) // Body - Request content // Init - Contains request body and headers and other configurations such as the request method.
Because fetch() returns a promise, you can chain as many .then() as you want and a catch method to gracefully handle errors thrown in a failed request.
Applying all the knowledge so far, you can make a request to the GitHub /users endpoint with the code below.
fetch(URL, init:{method: 'GET', headers:{}, body}) fetch('https://api.github.com/users/{YOUR_USERNAME}') .then(response => response.json()) //Converting the response to a JSON object .then( data => console.log(data)) // Now you will be able to see the data on you browser console .catch( error => console.error(error));
Let’s Create a Simple Application
Let’s first create an HTML file named index.html and paste these HTML codes there.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Get Github Profile</title>
<link rel=”stylesheet” href=”includes/style.css”>
</head>
<body>
<div class=”search”>
<form action=”” class=”search_form”>
<input type=”text” class=”search_input” placeholder=”Search a GitHub Username”>
</form>
</div>
<div class=”wrapper”></div>
<script src=”includes/app.js”></script>
</body></html>
Now we need to style our application. so that now let’s create a CSS file named style.css. and paste this CSS code to style the application.
@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap’);
*{margin: 0; padding: 0;}
img{width: 100%;height: 100%;object-fit: cover;}
body{
font-family: ‘Montserrat’, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
}
.wrapper{
width: 750px;
}
.search {
width: 750px;
}
.search_input{
background: #fafaf6;
width: 85%;
outline: none;
border: none;
padding: 30px 25px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
margin: 20px auto;
display: block;
font-size: .95em;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1);
}
.info{
width: 100%;
display: flex;
flex-direction: column;
background: #fafaf6;
margin: 20px 0px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1);
text-align: center;
padding: 15px 0px;
}
.image{
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
align-self: center;
overflow: hidden;
border: 7px solid #ddd;
width: 30%;
margin: 30px 0px;
margin-bottom: 0px;
}
.user_data{
width: 90%;
margin: 30px 35px;
align-self: center;
margin-bottom: 10px;
}
.user_data h2{
font-size: 1.6em;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
.user_data p{
font-size: 1em;
font-weight: 400;
margin-bottom: 10px;
text-align: center;
}
.user_data ul{
display: flex;
justify-content: space-between;
font-weight: 500;
width: 80%;
margin: 30px auto;
}
.user_data ul li{
list-style: none;
}
.repo a {
display: inline-block;
background: #ddd;
text-decoration: none;
padding: 4px 14px;
font-size: .9em;
border-radius: 6px;
margin-right: 5px;
margin-bottom: 12px;
color: #000;
font-weight: 500;
}
@media (max-width: 800px) {
.wrapper{
width: 90%;
}
.search {
width: 90% !important;
}
.user_data ul{
width: 100%;
text-align: center;
font-size: .9em;
}
.user_data h2{
font-size: 1.2em;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
.user_data p{
font-size: .9em;
font-weight: 400;
margin-bottom: 10px;
text-align: center;
}
.user_data {
margin: 30px 20px;
align-self: center;
}
}
Now we have to give life to this Github user API application ????. to do that we have to write JavaScript. let’s create a JavaScript file named app.js and paste this code.
const search_form = document.querySelector(‘.search_form’)
const search_input = document.querySelector(‘.search_input’)let url = ‘https://api.github.com/users/’
search_form.addEventListener(‘submit’, function(e){
e.preventDefault()
userData(search_input.value)
})function userData(username){
fetch(url + username)
.then(res => {
if(res.ok){
return res.json()
}else{
info.innerHTML = ‘Something went Wrong :)’
}
})
.then(data => {
console.log(data)
let output = `
<div class=”image”>
<img src=”${data.avatar_url}” alt=””>
</div>
<div class=”user_data”>
<h2>${data.name}</h2>
<p>${data.bio}</p>
<ul>
<li>${data.followers} <strong>Followers</strong></li>
<li>${data.following} <strong>Following</strong></li>
<li>${data.public_repos} <strong>Repos</strong></li>
</ul><div class=”repo”>
</div>
</div>
`
document.querySelector(‘.wrapper’).innerHTML = `<div class=”info”></div>`
const info = document.querySelector(‘.info’)
info.innerHTML = output
let imageWidth = document.querySelector(‘.image’).clientWidth;
let image = document.querySelector(‘.image’)
image.style.cssText = `height: ${imageWidth}px`
search_input.value = ”userRepo(username)
})
.catch(error => {
info.innerHTML = ‘Something went Wrong 🙂 <br> Error: ‘ + error
})
}function userRepo(username){
fetch(url + username + ‘/repos’)
.then(res => {
if(res.ok){
return res.json()
}else{
info.innerHTML = ‘Something went Wrong 🙂 <br> Maybe you have given a wrong username!’
}
})
.then(data => {
console.log(data)
let repos = ”
for(let i = 0; i < data.length; i++){
repos += `<a href=”${data[i].html_url}”>${data[i].name}</a>`
}
document.querySelector(‘.repo’).innerHTML = repos
})
.catch(error => {
info.innerHTML = ‘Something went Wrong 🙂 <br> Error: ‘ + error
})
}window.addEventListener(‘resize’, function(){
if(document.querySelector(‘.image’)){
let imageWidth = document.querySelector(‘.image’).clientWidth;
let image = document.querySelector(‘.image’)
image.style.cssText = `height: ${imageWidth}px`
}
})
Now we are done to create a simple application to get GitHub user profile information by giving username????
Download source code from GitHub
Visit my GitHub repo and download the source code. Visit GitHub repository
0 Comments