How to Make Your Own Cryptocurrency Dashboard
Pinterest Stumbleupon Whatsapp

With all the talks of forking What Is a Bitcoin Fork and What Happens Afterwards? What Is a Bitcoin Fork and What Happens Afterwards? Cryptocurrencies are exciting and intriguing. Unlike regular money, cryptocurrency can "fork" into two different types of coin. But how do they do it, and what does fork even mean? Read More , scams 5 Common Cryptocurrency Scams and How to Avoid Them 5 Common Cryptocurrency Scams and How to Avoid Them If you're interested in investing in the somewhat risky world of cryptocurrency, there are a few common scams you should be aware of. Here's how to avoid being caught out. Read More , websites stealing your CPU to mine altcoins Are Websites Using Your CPU for Cryptocurrency Mining? Are Websites Using Your CPU for Cryptocurrency Mining? Online adverts are unpopular, so infamous online piracy site The Pirate Bay has hit upon a solution: use every visiting PC to mine cryptocurrencies. Would you be happy if your PC was hijacked like this? Read More , and crazy price volatility, cryptocurrencies (“crypto”) are certainly becoming more mainstream.

If you’ve invested or are considering purchasing any cryptocurrencies, then you’ll need a way to monitor their prices in real time. Fortunately, you can easily build yourself a crypto dashboard using nothing more than HTML and CSS Learn HTML and CSS with These Step by Step Tutorials Learn HTML and CSS with These Step by Step Tutorials Curious about HTML, CSS, and JavaScript? If you think that you have a knack for learning how to create websites from scratch -- here are a few great step-by-step tutorials worth trying. Read More .

Note: Purchasing cryptocurrencies is a highly speculative investment. Never invest more than you can afford, and be prepared to lose it all overnight.

Getting Started

This dashboard is powered by a free widget provided by This excellent website shows statistics and current prices of thousands of cryptocurrencies. Start by selecting your currency of choice, or by entering a coin into the search facility on the top right.

crypto dashboard on CoinMarketCap

Once selected, you’ll be taken to the coin overview page, where various statistics, charts, and analytics are shown about your chosen coin. Head on over to the Tools tab. This is where you’ll see a ready made widget, showing specific data about your chosen coin. Feel free to experiment with the Customize this widget settings, but for now, the basic widget is enough. Copy the code from the Website Widget box or keep the page open for use later on.

Here’s what the widget code looks like for Bitcoin:

<script type="text/javascript" src=""></script>
<div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" ></div>

Whether you’re into Bitcoin, Ethereum, Ripple, Dogecoin, or any other of the 1,000+ alternative (alt) coins available, this process is exactly the same: find a coin, then copy the widget code.

If you want to get fancy with automation, you can use the API Ticker and a scheduling tool such as Cron How to Schedule Tasks in Linux with Cron and Crontab How to Schedule Tasks in Linux with Cron and Crontab The ability to automate tasks is one of those futuristic technologies that is already here. Every Linux user can benefit from scheduling system and user tasks, thanks to cron, an easy-to-use background service. Read More to perform nearly anything you like. It’s a bit beyond the scope of this article, but you could create an email alert if the price drops below a certain threshold, for example.

Building the Webpage

Now that you have the widget, you need to create a basic HTML page to display it. Using your favorite text editor, create a new HTML file called dashboard.html.

Here’s the starter code you need:

<!doctype html>

   <title>Crypto Dashboard</title>


Paste your HTML widget code between the body tags. Going back to Bitcoin, the whole code looks like this:

<!doctype html>

   <title>Crypto Dashboard</title>

   <script type="text/javascript" src=""></script>
   <div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" ></div>


crypto dashboard widget

That’s all there is to it. It really is that simple to create your own cryptocurrency dashboard.

Making It Pretty

While this dashboard is technically finished, it’s not great. The widget fills the screen horizontally, but is not very tall vertically. Let’s style it with cascading style sheets 5 Baby Steps to Learning CSS and Becoming a Kick-Ass CSS Sorcerer 5 Baby Steps to Learning CSS and Becoming a Kick-Ass CSS Sorcerer CSS is the single most important change webpages have seen in the last decade, and it paved the way for the separation of style and content. In the modern way, XHTML defines the semantic structure... Read More (CSS).

Underneath the title, add a style tag:


Inside these style tags is where you will write your CSS. Here’s what you need:

.coinmarketcap-currency-widget {
 width: 33%;
 margin: 100px auto;

crypto dashboard widget with CSS

This simple CSS does two things. Using the Document Object Model JavaScript and Web Development: Using the Document Object Model JavaScript and Web Development: Using the Document Object Model This article will introduce you to the document skeleton that JavaScript works with. Having a working knowledge of this abstract document object model, you can write JavaScript that works on any web page. Read More (DOM), it targets the coinmarketcap-currency-widget class. This class is the main container for the widget, so this command instructs your web browser to apply the following styles to that particular element.

The width of the widget is set to 33%, which ensures it no longer looks stretched when left at the default option (which is 100% in this instance).

Finally, a 100-pixel margin is added to the top and bottom, with the left and right getting a margin of auto. This moves the widget away from the top of your browser, and horizontally centers it.

There’s almost no limit to how far you can go with your styling of this widget. Perhaps you like red text or a blue background? How about flashing text? The sky really is the limit!

Adding More Coins

Now that you’ve nailed the basics, it’s time to add more coins. Even if you only own one coin, diversifying your dashboard has several benefits.

As a loose rule (although anything can happen in the wild west of cryptocurrencies), alt coins go up when Bitcoin goes down, apart from when Bitcoin absolutely sinks, it takes everything else with it.

By monitoring other currencies, you can often clearly see that money is flowing out of one, and into another. If you’re looking to purchase a new coin, adding it to your dashboard means you can possibly spot a trend or a daily low to scoop up a bargain!

Using the steps above, go ahead and get the widget code for any other currencies you want to track. Simply paste them below the Bitcoin tracker like this:

<script type="text/javascript" src=""></script>
<div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" data-secondary="BTC"></div>
<div class="coinmarketcap-currency-widget" data-currency="ethereum" data-base="USD" data-secondary="BTC"></div>
<div class="coinmarketcap-currency-widget" data-currency="ripple" data-base="USD" data-secondary="BTC"></div>
<div class="coinmarketcap-currency-widget" data-currency="cardano" data-base="USD" data-secondary="BTC"></div>

crypto dashboard add more coins

You don’t need the currency.js for every widget. You only need it once per page.

If you reload your dashboard, you’ll see it doesn’t look very good. All the coins are stacked vertically, and there are huge gaps between them! You’ll need to modify the CSS to make these widgets look better for multiple coins.

By adjusting the width and margin of each widget container, you can line up multiple widgets horizontally, like this:

width: 23%;
margin: 10px 1%;
float: left;

crypto dashboard widget horizontal

Using this same CSS, it’s possible to stack up as many widgets as you like, although you may need to modify it slightly after about 12 widgets.

crypto dashboard widget stacked

One final finishing touch is to make the dashboard automatically reload, ensuring you always have the latest prices.

Inside the head tags at the top of your document, paste this meta tag:

<meta http-equiv="refresh" content="60">

This will refresh your page every X seconds, where X is specified inside content. The code above will refresh the page every 60 seconds. Change this to whatever you like, provided you input the number in seconds.

Staying Sane

Now that your cryptocurrency dashboard is complete, you no longer have to check, or, or whatever website you use to monitor your purchases. Just don’t drive yourself crazy by checking the prices every minute.

Leave it running on your computer, or maybe even set it up on a Raspberry Pi and have it running in your hallway!

If you’re looking to check prices on the move, then take a look at our guide to the best cryptocurrency Android apps Stay Up-to-date On Your CryptoCurrency With These Android Apps Stay Up-to-date On Your CryptoCurrency With These Android Apps Keeping track of virtual currency change and day trading can both be fun, and a way to increase your profits after a good day's mining. Read More , and don’t forget to read our guide on everything you need to know before buying cryptocurrency.

Have you built a crypto dashboard? Where did you place yours? Let us know in the comments below!

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Hodler
    December 26, 2017 at 1:03 am

    Very nice, thanks.

  2. Erik S-H
    December 25, 2017 at 12:19 pm

    Good article, thanks :-) Made my own very fine widget

    • Joe Coburn
      December 30, 2017 at 7:43 pm

      Nice -- got a picture of it in use?