Bitcoin Price that updates in specific Seconds

Question

I have with me my HTML and Java code which is used to retrieve and display the price of the Bitcoin in USD through the bitcoininfo. I want it to auto update on Javascript every 5 seconds. This ensures non refreshing of the page to get the current price. Have shared my code below:-

<!DOCTYPE html> 
<html lang="en" > 
<head> 

  <meta charset="UTF-8"> 
  <title>Bitcoin Current price</title> 
  <style>#wrapper { 
  font-size: 1em; 
  font-family: arial; 
  margin: 20px auto; 
  width:450px; 
  color: green; 
  text-align: center; 
} 

#btc {font-size:6em;} 

</style> 
</head> 
<body> 
<!-- partial:index.partial.html --> 
<div id="wrapper"> 
    <h1>Bitcoin Current Price</h1> 
    <div id="btc"></div> 
    </div> 
    <!-- partial --> 
      <script> var currentPrice = new XMLHttpRequest(); 

currentPrice.open('GET', 'https://api.gdax.com/products/BTC-USD/book', true); currentPrice.onreadystatechange = function(){ 
    if(currentPrice.readyState == 4){ 
        var ticker = JSON.parse(currentPrice.responseText); 
        var price = ticker.bids[0][0]; 
        document.getElementById('btc').innerHTML = "$" + price; 
  }; 
}; 
currentPrice.send();</script> 

</body>
</html>

If there's a better way to do it, a pointer in the right direction will be well appreciated. Thank you!

Soham · Answer 1 · Feb 28, 2022

The better way to do so is to make the API into a function by wrapping the call and then keep constantly calling it every 5 seconds by using setInterval. Have shared the code below:-


<!DOCTYPE html> 
<html lang="en">

<head> 
    <meta charset="UTF-8"> 
    <title>Bitcoin Current price</title> 
    <style> 
        #wrapper { 
            font-size: 1em; 
            font-family: arial; 
            margin: 20px auto; 
            width: 450px; 
            color: green; 
            text-align: center; 
} 

#btc { 
    font-size: 6em; 
} 
  </style> 
</head>

<body> 
    <!-- partial:index.partial.html --> 
    <div id="wrapper"> 
          <h1>Bitcoin Current Price</h1> 
        <div id="btc"></div> 
</div> 
<!-- partial --> 
<script> 
  function get_price() { 
  var el = document.getElementById('btc') 
  fetch("https://api.gdax.com/products/BTC-USD/book") 
  .then(res => res.json()) .then(res => { 
  var price = res.bids[0][0]; 
    el.innerHTML = "$" + price; 
}).catch(err => { 
    el.innerHTML = "$0.00 - Error"; 
});

}

get_price()

setInterval(get_price, 5000) 
</script> 

</body> 

</html>

answered Feb 28, 2022 by Soham
• 9,710 points

Bitcoin Price that updates in specific Seconds

Your comment on this question:

1 answer to this question.

Your answer

Your comment on this answer:

Related Questions In Blockchain

How to use bitcoin price as place holder in php?

Is there a way to send funds from a specific bitcoin address in a wallet?

How does the geth ethereum platform automatically connect to the nodes that are in the main network of Ethereum?

Why is it so difficult to find a nonce while validating a block in Bitcoin?

Protocols used in a distributed/dlt system for the nodes to establish communication

Truffle tests not running after truffle init

Hyperledger Sawtooth vs Quorum in concurrency and speed Ask

How to add a new organisation to an existing channel in hyperledger fabric without creating a new node/peer for that organisation. Can we add a organisation which does not contain any nodes?

Bitcoin Core on external SSD in OS X

JAVA Retrive current bitcoin price with JSON

Subscribe to our Newsletter, and get personalized recommendations.

TRENDING CERTIFICATION COURSES

TRENDING MASTERS COURSES

COMPANY

WORK WITH US

DOWNLOAD APP

CATEGORIES

CATEGORIES

TRENDING BLOG ARTICLES

TRENDING BLOG ARTICLES