Learn how to write a 5 minute crypto tracker website

Interested in seeing price changes? Want to learn a bit about programming? You can follow this guide to create a tracker website with almost no programming experience nor tools but your browser. This post we will teach you the basics of tracking your favorite tokens through a simple javascript html page.

man looking at portfolio

Connecting an API

Lets get started with the API. The API documentation of what we’re using from coin market cap can be found here:
https://coinmarketcap.com/api/

APIs are interfaces for data feeds that come from companies and applications

 

API

In this example below we will only deal with the live ticker data which we don’t need to do any request parameters from the url (end point)

https://api.coinmarketcap.com/v1/ticker/

Click on the link above to see how the data is sent back to you.

Now that we see that data is returned to us through this endpoint, we need to filter that data to only display the information we need. For the case of this API, we can just add the crypto to the end of the url like this:

https://api.coinmarketcap.com/v1/ticker/neo

Here we can see the current price which we can see is labelled “price_usd”, the symbol “neo”, and the last change within the hour “percent_change_1h”

Writing the Code

Lets start writing the code now. I recommend opening a code pen (https://codepen.io/pen/) and writing all the code inside the java script right side.

First lets declare some variables for the API URL, and the Cryptos that we want to follow. We’ll declare the follow:

const apiURL = “https://api.coinmarketcap.com/v1/ticker/”;
const cryptos = [“bitcoin”, “cybermiles”, “neo”,”tether”,”ripple”, “Ethereum”];

We use const to declare them as constants since we won’t be modifying these variables as we develop. Next lets declare a function that will update the content of the web page. We’ll call this function “update”.

const update = () => {
//code goes here
}

Since we’re actually going to run this function for each crypto above, we’ll use something called a map function that will run the function code for each crypto (element) within the “cryptos” constant.

const update = () => cryptos.map( crypto => {
//code goes here
})

We can use “crypto” arrow sign to do an operation on each listed crypto. We need to get the info for each crypto by appending the crypto name to the url as mentioned above. We then need to take all that information from the url and retrieve the fields above we mentioned earlier. To do this we’re going to use a jQuery function like this:

$.getJSON( apiURL + crypto + “/”,
data => {
//code goes here
const usdValue = data[0].price_usd;
const lastHr = data[0].percent_change_1h;
const last24Hr = data[0].percent_change_24h;;
const last7D = data[0].percent_change_7d;
})

We’ll save all the “data” to more constants that we can use later on . From the URL endpoint we can look at from our browser.

(E.g. https://api.coinmarketcap.com/v1/ticker/neo )

To be continued:
1. Styling the code with html
2. Entering your portfolio
– Sneak Peek at what the final code will look like