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>