cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Untitled

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html lang="en">

<head>
    <title>Bitcoin | Bitcoin Cash</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=0.5, maximum-scale=1.5, width=device-width">

    <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAC2ElEQVR4nHWTP2hddRzFz/n+7p/3bl5SX5PX9KWl6iCCiAoKpUIKkg4Kzg4apIM4pK0dHAQ7xI5OShoR7eCiuJeCUjLFpQ5upaCkIrQkNUlbkry+P/fe3/c4BDEOPdNZPtM5HwKABJIQAAyXjr2VpPogOmbdcRiABcO2GX6pol9tnr//80GG/xYtd1qVZVfMcDYQiBEIARiMpGBglhF1BCT/Lt0rL/KTB3sSSC3C0OkUIyY38lY41d/xmAWEKqJP6o9gfKV2CFINMjQnzEY9/3VH1ZkjW1t942V4X+nXeSucGuzEYVEwSLoI4KohvB8d21lCNjJLIdhgx8u8ZSdbMfmKl+EcLM/MZQlXqkq1ADQK9vs9zYfE19Y279+ZbE2nR8fSZ0cxfpFkNleWcgrIM4ZRrTMmxwUjlAQGo/7cfFA+X7y0/lPeOXznuanup0/l4RIX7t0y4bNgoAAKAA3aZ6nTVSVGF6NzZqqdXR/e6r5x9+5uCMEWRb2jRSSVMBUFNwNAsCpFUqeNYDsKcAEgCivsVTnfPvHxvUGt+MLO0F/GM08nRXfjeln6fGIkAdQCCLYNByMIPXcQrwOAnMePtpO1Ya/6q7c9PVmc3/ixKrWVJTBp/zcm6FEgIEAgrKxkecrXet+c6IaAhy4UAq6NL/y9uffl9ItpiokqwhMDBD0yiatpRkFwAIJRct30varKFjZ+s1F5rLiw/mH/SvfdLA3XYGxEh2cZIXGVg+WZuTzhyqhUFKFmYUn/sZ/LMvyeMLldVvVsrHUTxtvNBsf6Q7kRytP9GQkAj5dmvi8m7L3BrpckMgBVox3SwcP6EolmSHgk1ngzBByvo6rmeMj7u/7D2Efr89QibLPTKQ4xXclbdnKw6w4ABCSABLzRtGQ0dLjDm4f+f+X/ZPp8crwabyyZ4WwwoCqFKIAAHEAzf4JMT9LZhdkYMQUAIWDbiNXK9W3z3MaNg8w/IIiUrz68FYEAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />

    <!-- javascript -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

    <!-- css -->

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

    <div class="table-title">
        <center>
            <h3>

                <div id="page">

                    <div class="menu">
                        <button class="btn" type="button" id="modal_open">about</button>
                    </div>

                </div>
                <!-- end #page -->

                <div class="modal-overlay" id="modal_window" aria-hidden="true" role="dialog" aria-labelledby="modal_title">
                    <div class="modal-content" id="modal_holder" role="document">
                        <!-- content start -->
                        <a>On August 1st, 2017 bitcoin will split into two currencies. This website provides data for both of them.<br><br>more info:<br><br>Bitcoin: <a href="https://bitcoin.org/">https://bitcoin.org/</a><br>Bitcoin Cash: <a href="https://www.bitcoincash.org/">https://bitcoincash.org/</a><br><br>api sources:<br><br><a href="https://coinmarketcap.com/api/">https://coinmarketcap.com/api/</a><br><a href="https://blockchain.info/api/">https://blockchain.info/api/</a><br></a>
                        <!-- content end -->
                        <button class="btn-close" id="modal_close" type="button" aria-label="close">&times;</button>
                    </div>
                </div>
                <!-- end .modal-overlay -->

                <script type="text/javascript">
                    // modal window
                    (function() {

                        'use strict';

                        // Helper function to place modal window as the first child of the #page node. DOM must be loaded.
                        function swap() {
                            var body = document.body;
                            var m = document.getElementById('modal_window');
                            body.insertBefore(m, body.firstChild);
                        }
                        swap();

                        // List out the vars.
                        var mOverlay = getId('modal_window'),
                            mOpen = getId('modal_open'), // this is just watching a single button
                            mClose = getId('modal_close'),
                            modal = getId('modal_holder'),
                            modalOpen = false,
                            lastFocus,
                            i;


                        // Let's cut down on what we need to type to get an ID.
                        function getId(id) {
                            return document.getElementById(id);
                        }


                        // Let's open the modal.
                        function modalShow() {
                            lastFocus = document.activeElement;
                            mOverlay.setAttribute('aria-hidden', 'false');
                            modalOpen = true;
                            modal.setAttribute('tabindex', '0');
                            modal.focus();
                        }


                        // Binds to both the button click and the escape key to close the modal window
                        function modalClose(event) {
                            if (modalOpen && (!event.keyCode || event.keyCode === 27)) {
                                mOverlay.setAttribute('aria-hidden', 'true');
                                modal.setAttribute('tabindex', '-1');
                                modalOpen = false;
                                lastFocus.focus();
                            }
                        }


                        // Restrict focus to the modal window when it's open.
                        function focusRestrict(event) {
                            if (modalOpen && !modal.contains(event.target)) {
                                event.stopPropagation();
                                modal.focus();
                            }
                        }


                        // Close modal window by clicking on the overlay
                        mOverlay.addEventListener('click', function(e) {
                            if (e.target == modal.parentNode) {
                                modalClose(e);
                            }
                        }, false);


                        mOpen.addEventListener('click', modalShow);

                        mClose.addEventListener('click', modalClose);

                        document.addEventListener('keydown', modalClose);

                        // restrict tab focus on elements only inside modal window
                        // Seems like a heavy-handed approach and a problem for DOM elements added later.
                        var allNodes = document.querySelectorAll("*");
                        for (i = 0; i < allNodes.length; i++) {
                            allNodes.item(i).addEventListener('focus', focusRestrict);
                        }

                    })();
                </script>

                <br> Total Market Cap of Cryptocurrencies: <br> <br>

                <a id="totalCap"></a>

            </h3>
        </center>
    </div>

    <table class="table-fill">
        <thead>
            <tr>
                <th class="text-center"> <br> Metric</th>
                <th class="text-center"><img src="data:image/png;base64,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" alt="bitcoin_icon"> <br> Bitcoin</th>
                <th class="text-center"><img src="data:image/png;base64,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" alt="bitcoin_cash_icon"> <br> Bitcoin Cash </th>
            </tr>
        </thead>
        <tbody class="table-hover">
            <tr>
                <td class="text-right">Price</td>
                <td class="text-center">

                    <a id="bitcoinPrice"></a>

                    <span class="red"></span>
                    <span class="green"></span>

                </td>
                <td class="text-center">

                    <a id="bccPrice"></a>

                </td>
            </tr>
            <tr>
                <td class="text-right">Market Cap</td>
                <td class="text-center">

                    <a id="bitcoinMarketCap"></a>

                </td>
                <td class="text-center">

                    <a id="bccMarketCap"></a>

                </td>
            </tr>
            <tr>
                <td class="text-right">Trading Volume (24h)</td>
                <td class="text-center">

                    <a id="bitcoinVol"></a>

                </td>
                <td class="text-center">

                    <a id="bccVol"></a>

                </td>
            </tr>
            <tr>
                <td class="text-right">Transactions (24h)</td>
                <td class="text-center">

                    <a id="bitcoinTx"></a>

                </td>
                <td class="text-center">

                    <a>not available yet</a>

                </td>
            </tr>
            <tr>
                <td class="text-right">Market Share</td>
                <td class="text-center">

                    <a id="bitcoinMarketShare"></a>

                </td>
                <td class="text-center">

                    <a id="bccMarketShare"></a>

                </td>
            </tr>
            <tr>
                <td class="text-right">Price Change (24h)</td>
                <td class="text-center">

                    <a id="bitcoinChange"></a>

                </td>
                <td class="text-center">

                    <a id="bccChange"></a>

                </td>
            </tr>
        </tbody>
    </table>

    <center>
        <a>
            <font size="1" color="white" face="verdana">Data is automatically updated.</font>
        </a>
    </center>

    <br>
    <br>

    <div class="table-title">
        <h3>
            <center><a>Market Share</a></center>
        </h3>
    </div>

    <canvas id="myChart" height="80"></canvas>

    <br>
    <br>
    <br>
    <br>


  <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1101_RC02/embed_loader.js"></script>
  <script type="text/javascript">
    trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"bitcoin","geo":"","time":"now 7-d"},{"keyword":"bitcoin cash","geo":"","time":"now 7-d"}],"category":0,"property":""}, {"exploreQuery":"date=now 7-d&q=bitcoin,bitcoin%20cash","guestPath":"https://trends.google.com:443/trends/embed/"});
  </script>


</body>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
@import "bourbon";

body {
  background: #222428;
  font-family: "Oswald", sans-serif;
}

div.table-title {
  display: block;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
}

.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:23px;
  font-weight: 100;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}
 
tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:20px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}


/*
  Modal Overlay
*/
.modal-overlay {
  background:rgba(0,0,0,.8);
  height: 100%;
  left: 0;
  display: flex;    // This is IE 11+
  overflow: auto;
  padding: 1.5em;
  position: fixed;
  top: 0;
  //transition: opacity .2s;
  width: 100%;
  z-index: -1;
}

.modal-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
}

.modal-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/*
  Modal Content Area
*/
.modal-content {
  background: #efefef;
  margin: auto;
  max-width: 800px;
  overflow: auto;
  overflow-x: hidden;
  padding: 1.5em;
  position: relative;
  //transform: scale(.8);
  //transition: transform .3s;
  width: 80%;
}

.modal-overlay[aria-hidden="false"] .modal-content {
  //transform: scale(1);
  //transform: rotate(7deg);
}

/*
  General Modal Content
*/
#modal-title {
  margin-top: 0;
  padding-right: 1.25em;
}

/*
  Close Modal Button
*/
.btn-close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: arial;
  //font-size: 2em;
  //font-weight: 800;
  font-size:1.2em;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: .25em;
  top: .25em;
  z-index: 2;
}

.btn-close:hover {
  color: #c12f48;
}

.btn-close:focus {
  outline: 1px dotted;
}

.btn {
  -webkit-border-radius: 35;
  -moz-border-radius: 35;
  border-radius: 35px;
  font-family: Arial;
  color: #ffffff;
  font-size: 32px;
  background: #e63d27;
  padding: 10px 20px 10px 20px;
  border: solid #f44236 0px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}


.chart {
  position: relative;
  width: 450px;
  height: 450px;
  top: 50%;
  left: 50%;
  margin: -225px 0 0 -225px;
}
.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0,0,0,.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
  &::after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(0,0,0,.7);
      line-height: 0;
  }
}
.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  text-shadow: 0 -1px 0 #111;
  cursor: default;
}
.doughnutSummaryTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -27%;
  font-size: 22px;
  letter-spacing: .06em;
}
.doughnutSummaryNumber {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -15%;
  font-size: 55px;
}
.chart path:hover { opacity: 0.65; }


.red {
  animation: blinkRed 15s;
  -webkit-animation: blinkRed 15s;
  -moz-animation: blinkRed 15s;
  -o-animation: blinkRed 15s;
}

.green {
  animation: blinkGreen 15s;
  -webkit-animation: blinkGreen 15s;
  -moz-animation: blinkGreen 15s;
  -o-animation: blinkGreen 15s;
}

@keyframes blinkRed {
  50% {
    color: red;
  }
}

@keyframes blinkGreen {
  50% {
    color: green;
  }
}

@-moz-keyframes blinkRed {
  50% {
    color: red;
  }
}

@-moz-keyframes blinkGreen {
  50% {
    color: green;
  }
}

@-o-keyframes blinkRed {
  50% {
    color: red;
  }
}

@-o-keyframes blinkGreen {
  50% {
    color: green;
  }
}

@-webkit-keyframes blinkRed {
  50% {
    color: red;
  }
}

@-webkit-keyframes blinkGreen {
  50% {
    color: green;
  }
}


.chart {
  position: relative;
  width: 450px;
  height: 450px;
  top: 50%;
  left: 50%;
  margin: -225px 0 0 -225px;
}
.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0,0,0,.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
  &::after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(0,0,0,.7);
      line-height: 0;
  }
}
.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  text-shadow: 0 -1px 0 #111;
  cursor: default;
}
.doughnutSummaryTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -27%;
  font-size: 22px;
  letter-spacing: .06em;
}
.doughnutSummaryNumber {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -15%;
  font-size: 55px;
}
.chart path:hover { opacity: 0.65; }
            
          
!
            
              String.prototype.commafy = function() {
  return this.replace(/(^|[^\w.])(\d{4,})/g, function($0, $1, $2) {
    return $1 + $2.replace(/\d(?=(?:\d\d\d)+(?!\d))/g, "$&,");
  });
};

function fixed(num, scale) {
  return (+(Math.round(+(num + "e" + scale)) + "e" + -scale)).toFixed(scale);
}

var totalCap;
var totalCapTemp;
var bitcoinPriceTemp;
var bccPriceTemp;
var bitcoinMarketCap;
var bccMarketCap;
var bitcoinMarketCapTemp;
var bccMarketCapTemp;
var bitcoinMarketShareTemp;
var bccMarketShareTemp;
var bitcoinMarketShare;
var bccMarketShare;
var bitcoinVolTemp;
var bccVolTemp;
var bitcoinChangeTemp;
var bccChangeTemp;
var bitcoinTxTemp;

var chart;
var myVar = setInterval(myTimer, 60000);

$(document).ready(function() {
  myTimer();
});

function myTimer() {
  function runInOrder(callback) {
    getTotalMarketCap(function() {
      getAllOtherValues(function() {
        getMarketShare(callback);
      });
    });
  }
  runInOrder(createChart);
}

function getTotalMarketCap(callback) {
  $.getJSON("https://api.coinmarketcap.com/v1/global/", function(json) {
    totalCap = fixed(parseFloat(json.total_market_cap_usd / 1000000000), 2);
    if (!totalCapTemp || totalCapTemp == totalCap) {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass();
    } else if (totalCap > totalCapTemp) {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass()
        .addClass("green");
      getMarketShare();
    } else {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass()
        .addClass("red");
      getMarketShare();
    }
  });
  callback();
}

function getAllOtherValues(callback) {
  $.getJSON("https://api.coinmarketcap.com/v1/ticker/?limit=10", function(
            json
  ) {
    $.each(json, function(index, value) {
      if (value.id == "bitcoin") {
        bitcoinPrice = fixed(parseFloat(value.price_usd), 2);
        if (!bitcoinPriceTemp || bitcoinPriceTemp == bitcoinPrice) {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass();
        } else if (bitcoinPrice > bitcoinPriceTemp) {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
        } else {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
        }
        bitcoinPriceTemp = parseFloat(bitcoinPrice);

        bitcoinVol = parseInt(value["24h_volume_usd"]);
        if (!bitcoinVolTemp || bitcoinVolTemp == bitcoinVol) {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass();
        } else if (bitcoinVol > bitcoinVolTemp) {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
        } else {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
        }
        bitcoinVolTemp = parseInt(bitcoinVol);

        bitcoinChange = fixed(parseFloat(value.percent_change_24h), 2);
        if (!bitcoinChangeTemp || bitcoinChangeTemp == bitcoinChange) {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass();
        } else if (parseFloat(bitcoinChange) > parseFloat(bitcoinChangeTemp)) {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass()
            .addClass("green");
        } else {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass()
            .addClass("red");
        }
        bitcoinChangeTemp = bitcoinChange;

        bitcoinMarketCap = parseInt(value.market_cap_usd);
        if (!bitcoinMarketCapTemp) {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass();
          getMarketShare();
        } else if (bitcoinMarketCapTemp == bitcoinMarketCap) {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass();
        } else if (bitcoinMarketCap > bitcoinMarketCapTemp) {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass()
            .addClass("green");

          getMarketShare();
        } else {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass()
            .addClass("red");

          getMarketShare();
        }
        bitcoinMarketCapTemp = bitcoinMarketCap;
      }

      if (value.id == "bitcoin-cash") {
        bccPrice = fixed(parseFloat(value.price_usd), 2);
        if (!bccPriceTemp || bccPriceTemp == bccPrice) {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass();
        } else if (bccPrice > bccPriceTemp) {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
        } else {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
        }
        bccPriceTemp = parseFloat(bccPrice);

        bccVol = parseInt(value["24h_volume_usd"]);
        if (!bccVolTemp || bccVolTemp == bccVol) {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass();
        } else if (bccVol > bccVolTemp) {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
        } else {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
        }
        bccVolTemp = parseInt(bccVol);

        bccChange = fixed(parseFloat(value.percent_change_24h), 2);
        if (!bccChangeTemp || bccChangeTemp == bccChange) {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass();
        } else if (parseFloat(bccChange) > parseFloat(bccChangeTemp)) {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass()
            .addClass("green");
        } else {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass()
            .addClass("red");
        }
        bccChangeTemp = bccChange;

        bccMarketCap = parseInt(value.market_cap_usd);
        if (!bccMarketCapTemp) {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass();
          getMarketShare();
        } else if (bccMarketCapTemp == bccMarketCap) {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass();
        } else if (bccMarketCap > bccMarketCapTemp) {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass()
            .addClass("green");

          getMarketShare();
        } else {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass()
            .addClass("red");

          getMarketShare();
        }
        bccMarketCapTemp = bccMarketCap;
      }
    });
  });

  $.getJSON("https://api.blockchain.info/stats?cors=true", function(json) {
    bitcoinTx = json.n_tx.toLocaleString();
    if (!bitcoinTxTemp || bitcoinTxTemp == bitcoinTx) {
      $("#bitcoinTx")
        .text(bitcoinTx)
        .removeClass();
    } else if (parseInt(bitcoinTx) > parseInt(bitcoinTxTemp)) {
      $("#bitcoinTx")
        .text(bitcoinTx)
        .removeClass()
        .addClass("green");
    } else {
      $("#bitcoinTx")
        .text(bitcoinTx)
        .removeClass()
        .addClass("red");
    }
    bitcoinTxTemp = bitcoinTx;
  });

  callback();
}

function getMarketShare(callback) {
  bitcoinMarketShare = fixed(bitcoinMarketCap * 0.0000001 / totalCap, 2);
  if (!bitcoinMarketShareTemp || bitcoinMarketShareTemp == bitcoinMarketShare) {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass();
  } else if (bitcoinMarketShare > bitcoinMarketShareTemp) {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass()
      .addClass("green");
    chart.update();
  } else {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass()
      .addClass("red");
    chart.update();
  }
  bitcoinMarketShareTemp = bitcoinMarketShare;

  bccMarketShare = fixed(bccMarketCap * 0.0000001 / totalCap, 2);
  if (!bccMarketShareTemp || bccMarketShareTemp == bccMarketShare) {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass();
  } else if (bccMarketShare > bccMarketShareTemp) {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass()
      .addClass("green");
    chart.update();
  } else {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass()
      .addClass("red");
    chart.update();
  }
  bccMarketShareTemp = bccMarketShare;

  callback && callback();
}

function createChart() {
  $(function() {
    Chart.defaults.global.legend.display = false;
    Chart.defaults.global.animation.duration = 0;
    var ctx = document.getElementById("myChart").getContext("2d");
    $("#myChart").css("background-color", "#222428");

    chart = new Chart(ctx, {
      // The type of chart we want to create
      type: "doughnut",

      // The data for our dataset
      data: {
        labels: ["Bitcoin", "Bitcoin Cash", "Others"],
        datasets: [
          {
            label: "dataset",
            backgroundColor: ["#2196f3", "#f44336", "#FFFFFF"],
            borderColor: "#000000",
            data: [
              bitcoinMarketShare,
              bccMarketShare,
              fixed(100 - bccMarketShare - bitcoinMarketShare, 2)
            ]
          }
        ]
      },

      // Configuration options go here
      options: {
        cutoutPercentage: 70,
        rotation: 185
      }
    });
  });
}
String.prototype.commafy = function() {
  return this.replace(/(^|[^\w.])(\d{4,})/g, function($0, $1, $2) {
    return $1 + $2.replace(/\d(?=(?:\d\d\d)+(?!\d))/g, "$&,");
  });
};

function fixed(num, scale) {
  return (+(Math.round(+(num + "e" + scale)) + "e" + -scale)).toFixed(scale);
}

var totalCap;
var totalCapTemp;
var bitcoinPriceTemp;
var bccPriceTemp;
var bitcoinMarketCap;
var bccMarketCap;
var bitcoinMarketCapTemp;
var bccMarketCapTemp;
var bitcoinMarketShareTemp;
var bccMarketShareTemp;
var bitcoinMarketShare;
var bccMarketShare;
var bitcoinVolTemp;
var bccVolTemp;
var bitcoinChangeTemp;
var bccChangeTemp;
var bitcoinTxTemp;

var chart;
var myVar = setInterval(myTimer, 60000);

$(document).ready(function() {
  myTimer();
});

function myTimer() {
  function runInOrder(callback) {
    getTotalMarketCap(function() {
      getAllOtherValues(function() {
        getMarketShare(callback);
      });
    });
  }
  runInOrder(createChart);
}

function getTotalMarketCap(callback) {
  $.getJSON("https://api.coinmarketcap.com/v1/global/", function(json) {
    totalCap = fixed(parseFloat(json.total_market_cap_usd / 1000000000), 2);
    if (!totalCapTemp || totalCapTemp == totalCap) {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass();
    } else if (totalCap > totalCapTemp) {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass()
        .addClass("green");
      getMarketShare();
    } else {
      $("#totalCap")
        .text("$" + totalCap + "B")
        .removeClass()
        .addClass("red");
      getMarketShare();
    }
  });
  callback();
}

function getAllOtherValues(callback) {
  $.getJSON("https://api.coinmarketcap.com/v1/ticker/?limit=10", function(
    json
  ) {
    $.each(json, function(index, value) {
      if (value.id == "bitcoin") {
        bitcoinPrice = fixed(parseFloat(value.price_usd), 2);
        if (!bitcoinPriceTemp || bitcoinPriceTemp == bitcoinPrice) {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass();
        } else if (bitcoinPrice > bitcoinPriceTemp) {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
        } else {
          $("#bitcoinPrice")
            .text("$" + bitcoinPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
        }
        bitcoinPriceTemp = parseFloat(bitcoinPrice);

        bitcoinVol = parseInt(value["24h_volume_usd"]);
        if (!bitcoinVolTemp || bitcoinVolTemp == bitcoinVol) {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass();
        } else if (bitcoinVol > bitcoinVolTemp) {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
        } else {
          $("#bitcoinVol")
            .text("$" + bitcoinVol.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
        }
        bitcoinVolTemp = parseInt(bitcoinVol);

        bitcoinChange = fixed(parseFloat(value.percent_change_24h), 2);
        if (!bitcoinChangeTemp || bitcoinChangeTemp == bitcoinChange) {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass();
        } else if (parseFloat(bitcoinChange) > parseFloat(bitcoinChangeTemp)) {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass()
            .addClass("green");
        } else {
          $("#bitcoinChange")
            .text(bitcoinChange.commafy() + "%")
            .removeClass()
            .addClass("red");
        }
        bitcoinChangeTemp = bitcoinChange;

        bitcoinMarketCap = parseInt(value.market_cap_usd);
        if (!bitcoinMarketCapTemp) {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass();
          getMarketShare();
        } else if (bitcoinMarketCapTemp == bitcoinMarketCap) {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass();
        } else if (bitcoinMarketCap > bitcoinMarketCapTemp) {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass()
            .addClass("green");

          getMarketShare();
        } else {
          $("#bitcoinMarketCap")
            .text("$" + bitcoinMarketCap.toLocaleString())
            .removeClass()
            .addClass("red");

          getMarketShare();
        }
        bitcoinMarketCapTemp = bitcoinMarketCap;
      }

      if (value.id == "bitcoin-cash") {
        bccPrice = fixed(parseFloat(value.price_usd), 2);
        if (!bccPriceTemp || bccPriceTemp == bccPrice) {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass();
        } else if (bccPrice > bccPriceTemp) {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
        } else {
          $("#bccPrice")
            .text("$" + bccPrice.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
        }
        bccPriceTemp = parseFloat(bccPrice);

        bccVol = parseInt(value["24h_volume_usd"]);
        if (!bccVolTemp || bccVolTemp == bccVol) {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass();
        } else if (bccVol > bccVolTemp) {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass()
            .addClass("green");
        } else {
          $("#bccVol")
            .text("$" + bccVol.toLocaleString().commafy())
            .removeClass()
            .addClass("red");
        }
        bccVolTemp = parseInt(bccVol);

        bccChange = fixed(parseFloat(value.percent_change_24h), 2);
        if (!bccChangeTemp || bccChangeTemp == bccChange) {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass();
        } else if (parseFloat(bccChange) > parseFloat(bccChangeTemp)) {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass()
            .addClass("green");
        } else {
          $("#bccChange")
            .text(bccChange.commafy() + "%")
            .removeClass()
            .addClass("red");
        }
        bccChangeTemp = bccChange;

        bccMarketCap = parseInt(value.market_cap_usd);
        if (!bccMarketCapTemp) {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass();
          getMarketShare();
        } else if (bccMarketCapTemp == bccMarketCap) {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass();
        } else if (bccMarketCap > bccMarketCapTemp) {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass()
            .addClass("green");

          getMarketShare();
        } else {
          $("#bccMarketCap")
            .text("$" + bccMarketCap.toLocaleString())
            .removeClass()
            .addClass("red");

          getMarketShare();
        }
        bccMarketCapTemp = bccMarketCap;
      }
    });
  });

  $.getJSON("https://api.blockchain.info/stats?cors=true", function(json) {
    bitcoinTx = json.n_tx.toLocaleString();
    if (!bitcoinTxTemp || bitcoinTxTemp == bitcoinTx) {
      $("#bitcoinTx")
        .text(bitcoinTx)
        .removeClass();
    } else if (parseInt(bitcoinTx) > parseInt(bitcoinTxTemp)) {
      $("#bitcoinTx")
        .text(bitcoinTx)
        .removeClass()
        .addClass("green");
    } else {
      $("#bitcoinTx")
        .text(bitcoinTx)
        .removeClass()
        .addClass("red");
    }
    bitcoinTxTemp = bitcoinTx;
  });

  callback();
}

function getMarketShare(callback) {
  bitcoinMarketShare = fixed(bitcoinMarketCap * 0.0000001 / totalCap, 2);
  if (!bitcoinMarketShareTemp || bitcoinMarketShareTemp == bitcoinMarketShare) {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass();
  } else if (bitcoinMarketShare > bitcoinMarketShareTemp) {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass()
      .addClass("green");
    chart.update();
  } else {
    $("#bitcoinMarketShare")
      .text(bitcoinMarketShare + "%")
      .removeClass()
      .addClass("red");
    chart.update();
  }
  bitcoinMarketShareTemp = bitcoinMarketShare;

  bccMarketShare = fixed(bccMarketCap * 0.0000001 / totalCap, 2);
  if (!bccMarketShareTemp || bccMarketShareTemp == bccMarketShare) {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass();
  } else if (bccMarketShare > bccMarketShareTemp) {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass()
      .addClass("green");
    chart.update();
  } else {
    $("#bccMarketShare")
      .text(bccMarketShare + "%")
      .removeClass()
      .addClass("red");
    chart.update();
  }
  bccMarketShareTemp = bccMarketShare;

  callback && callback();
}

function createChart() {
  $(function() {
    Chart.defaults.global.legend.display = false;
    Chart.defaults.global.animation.duration = 0;
    var ctx = document.getElementById("myChart").getContext("2d");
    $("#myChart").css("background-color", "#222428");

    chart = new Chart(ctx, {
      // The type of chart we want to create
      type: "doughnut",

      // The data for our dataset
      data: {
        labels: ["Bitcoin", "Bitcoin Cash", "Others"],
        datasets: [
          {
            label: "dataset",
            backgroundColor: ["#2196f3", "#f44336", "#FFFFFF"],
            borderColor: "#000000",
            data: [
              bitcoinMarketShare,
              bccMarketShare,
              fixed(100 - bccMarketShare - bitcoinMarketShare, 2)
            ]
          }
        ]
      },

      // Configuration options go here
      options: {
        cutoutPercentage: 70,
        rotation: 185
      }
    });
  });
}

            
          
!
999px
Loading ..................

Console