Fetching Realtime Bitcoin price in INR using ZebPay API

Posted By : Pushpandra Kumar | 11-Dec-2017

bitcoin

Today, I will show you how can we use ZebPay API for fetching ZebPay's Buying and selling rate in INR.

API: https://www.zebapi.com/api/v1/market/ticker/btc/inr

First, we will make Design How our web page looks like. So for that, i have made an HTML document in which there are two Div, one is holding the header and other is the container to fetch the realtime price.

I have attached the HTML code at the last.

Second, After preparing HTML file its time to do some makeUp of our HTML page how it will look like. I will not explain CSS part you can refer w3schools for that.

Third, Here comes the magic, we going to use Jquery Ajax function call to retrieve the ZebPay realtime price using ZebPay API.

ZebPay API response :

{
  "market": 1165351.0,
  "buy": 1165351.0,
  "sell": 1107084.0,
  "currency": "INR",
  "volume": 1884.71211154
}

ZebPay API returns the response in JSON format so we are going to use JSON result that is return from ajax call to print required data. We can are going to print only Buy and Sell price of the API. For further details, you can refer the code provided below.

Here is the Code.

script.js

 $(document).ready(function(){
var currCode = "INR";
https://www.zebapi.com/api/v1/market/ticker/btc/inr
$.ajax({
 method : "GET",
 url : "https://www.zebapi.com/api/v1/market/ticker/btc/inr",
 success: function(result,status){
 if(status=="success")
 $("#price").html("Buying : "+ result.market+ " Selling : "+ result.sell+"");
 }
 });
});

bit.css

body {
  font-family: roboto;
  margin: 0px;
  background-color: #babdbe;
  height: -webkit-fill-available;
  position: relative;
}
#header{
  width: 100%;
  height: 60px;
  background-color: #eceff1;
  box-shadow: 0 4px 3px #a8b2c1;
}

#header>p{
  margin: 0px auto;
  padding: 5px;
  font-weight: 400;
  font-size: 2.56rem;
  color: #ee6e73;
  text-align: center;
  vertical-align: middle;
}

#header>p>img{
  padding-top: 2px;
  float: left;
  width: 67px;
  height: 56px;
}

#body{
  background-color: white;
  box-shadow: 4px 4px 2px #a8b2c1;
  position: absolute;
      width: 50%;
      top: 50%;
      left: 25%;
}

#price{
  margin: 0px auto;
  padding: 5px;
  font-weight: 400;
  font-size: 2.56rem;
  color: #6ecdee;
  text-align: center;
  vertical-align: middle;
}

#price>b{
  color : #ee6e73
}

test.html

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script><script src="js/script.js" type="text/javascript" ></script>
<link href="css/bit.css" rel="stylesheet" type="text/css" /></html>
<title>Bitcoin Price Checker</title>
<head>
<body>
<div id="header">
<p>Bitcoin Price</p>
</div>

<div id="body">
<div id="price">Fetching.... details</div>
</div>
</body>
</html>

Above Code will show buying and Selling Price INR every time you refresh the page