Create a Bitcoin Price Index Watcher in HTML5
Everyone is talking about Bitcoin. The Bitcoin madness and the Blockchain revolution seem to be taking over the world. So, why not learn how to consume REST Web Services in HTML5 by creating a Bitcoin Price Index Watcher?
In that tutorial, you will learn how to make AJAX requests in HTML5 by consuming a Web Service provided by CoinDesk and how to parse the JSON data from this service to display it in the HTML page. We will use this Web Service: https://api.coindesk.com/v1/bpi/currentprice.json
Note that you can discover this tutorial in this video on YouTube:
You can discover the response returned by a call on the Bitcoin Price Index Watcher API :
As you can see, we could get the Bitcoin Price Index in US Dollars, GB Pounds, and Euros. Besides, we will display also the last updated time for the values.
Creating the HTML page
First, we start by creating the HTML page. It will be pretty simple with one logo and a simple div centered which will be used to display the data obtained from the Web Service.
Consuming the BPI API
Reading the JSON data
The final step is to write a parseJson method to read the data parsed and returned by the JSON.parse call. The data are stored in an array. So, it is simple to read the data and then to build HTML to display the values on the div:
Complete Source Code
Finally, it gives us the following code for our Bitcoin Price Index Watcher in HTML5:
Bitcoin Price Index Watcher in Action
To test our Bitcoin Price Index Watcher in live, you can go just here on the SSaurel’s Blog: https://www.ssaurel.com/cryptocoins/bpi.html
This is a screenshot of the final result :
Don’t hesitate to give it a try and share your thoughts concerning this tutorial in comments.