BTC/ETH Gap

btc-eth-gap.markdown

BTC/ETH Gap

A Pen by Scott Miller on CodePen.

License.

index.html

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-36659264-2', 'auto');
  ga('send', 'pageview');

</script>
<div class="container-fluid tall">
  <div class="row align-items-center tall">
    <div class="col-12">
      <div class="row justify-content-center">
        <div class="col-auto"><h1 class="display-4">BTC/ETH Gap</h1></div>
      </div>
      <div class="row justify-content-center">
        <h1 id="gapValue" class="data">...loading...</h1>
      </div>
      <div class="row justify-content-center">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked> CryptoCompare
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" id="option2" autocomplete="off"> CoinMarketCap
          </label>
        </div>
      </div>
      <div class="row justify-content-around">
        <div class="col hidden-sm-down"></div>
        <div class="col-auto card">
          <h5 class="text-center">BTC</h5>
          <p class="text-center">Cap: <span id="btcCap" class="data">...loading...</span></p>
          <p class="text-center">Price: <span id="btcPrice" class="data">...loading...</span></p>
          <p class="text-center">24h Volume: <span id="btcVol" class="data">...loading...</span></p>
          <p class="text-center">Updated: <span id="btcTime" class="data">...loading...</span></p>
        </div>
        <div class="col-1 hidden-sm-down"></div>
        <div class="col-auto card">
          <h5 class="text-center">ETH</h5>
          <p class="text-center">Cap: <span id="ethCap" class="data">...loading...</span></p>
          <p class="text-center">Price: <span id="ethPrice" class="data">...loading...</span></p>
          <p class="text-center">24h Volume: <span id="ethVol" class="data">...loading...</span></p>
          <p class="text-center">Updated: <span id="ethTime" class="data">...loading...</span></p>
        </div>
        <div class="col hidden-sm-down"></div>
      </div>
      <div class="row justify-content-center">
        <div class="col-auto card">
          <h5 class="text-center">Tips:</h5>
          <p class="text-center">ETH: 0xf245c7e0b899bf3333e203555fb814bb2d071bf1</p>
          <p class="text-center">BTC: 1FuC1tCwdwhPoySuGbzTMqQBJUP2vy8JTR</p>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-12 col-xl-6 col-md-8">
          <p class="text-center"><strong>Note:</strong> I believe the reason CryptoCompare shows Eth priced so much lower is because they don't include pricing from ETH/KRW (Korean Won) pairs, which all have Eth priced much higher than ETH/USD as of this writing.</p>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-auto" id="credits">
          Market data courtesy of <a href="https://www.cryptocompare.com/">CryptoCompare</a> and <a href="https://coinmarketcap.com/">CoinMarketCap</a>
        </div>
      </div>
    </div>
  </div>
</div>

script.babel

$(function() {
  getMarketData();
  setInterval(getMarketData, 10000);
});

$("#option1").parent().click(function() {
  $(".data").text("...loading...");
  getCryptoCompare();
  console.log("clicked")
});

$("#option2").parent().click(function() {
  $(".data").text("...loading...");
  getCoinMarketCap();
  console.log("clicked")
});

function getMarketData() {
  if ($("#option1").prop("checked")) {
    getCryptoCompare();
  } else {
    getCoinMarketCap();
  }
}

function getCryptoCompare() {
  $.when(
    $.get("https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH&tsyms=USD")
  ).done(function (data) {
    if ($("#option1").prop("checked")) {
      $("#gapValue").text( (data.RAW.BTC.USD.MKTCAP - data.RAW.ETH.USD.MKTCAP).toLocaleString("en-US", {style: "currency", currency: "USD"}) );
      $("#btcCap").text((data.RAW.BTC.USD.MKTCAP).toLocaleString("en-US", {style: "currency", currency: "USD"}));
      $("#btcPrice").text((data.RAW.BTC.USD.PRICE).toLocaleString("en-US", {style: "currency", currency: "USD"}));
      $("#btcVol").text((data.RAW.BTC.USD.VOLUME24HOUR).toLocaleString("en-US", {style: "currency", currency: "USD"}));
      $("#btcTime").text( (new Date(data.RAW.BTC.USD.LASTUPDATE * 1000) ).toLocaleString());

      $("#ethCap").text((data.RAW.ETH.USD.MKTCAP).toLocaleString("en-US", {style: "currency", currency: "USD"}));
      $("#ethPrice").text((data.RAW.ETH.USD.PRICE).toLocaleString("en-US", {style: "currency", currency: "USD"}));
      $("#ethVol").text((data.RAW.ETH.USD.VOLUME24HOUR).toLocaleString("en-US", {style: "currency", currency: "USD"}));
      $("#ethTime").text( (new Date(data.RAW.ETH.USD.LASTUPDATE * 1000) ).toLocaleString());
    }
  })
}

function getCoinMarketCap() {
  $.when(
    $.get("https://api.coinmarketcap.com/v1/ticker/bitcoin/"),
    $.get("https://api.coinmarketcap.com/v1/ticker/ethereum/")
  ).done(function (btc, eth) {
    if ($("#option2").prop("checked")) {
      $("#gapValue").text("$" + (btc[0][0].market_cap_usd-eth[0][0].market_cap_usd).toLocaleString({useGrouping: "false"}));
      $("#btcCap").text("$" + (btc[0][0].market_cap_usd-0).toLocaleString());
      $("#btcPrice").text("$" + btc[0][0].price_usd);
      $("#btcVol").text("$" + (btc[0][0]["24h_volume_usd"]-0).toLocaleString());
      $("#btcTime").text( (new Date(btc[0][0].last_updated * 1000) ).toLocaleString());

      $("#ethCap").text("$" + (eth[0][0].market_cap_usd-0).toLocaleString());
      $("#ethPrice").text("$" + eth[0][0].price_usd);
      $("#ethVol").text("$" + (eth[0][0]["24h_volume_usd"]-0).toLocaleString());
      $("#ethTime").text( (new Date(eth[0][0].last_updated * 1000) ).toLocaleString());
      console.log("value updated");
    }
  });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.js"></script>

style.scss

// .tall {
//   height: 100vh;
// }
body {
  background-color: #607D8B;
  color: #FFFFFF;
}

.card {
  background-color: #CFD8DC;
  color: #212121;
  padding: 10px 10px 0 10px;
  margin-bottom: 15px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.btn-group {
  margin-bottom: 5px;
  // margin-top: 5px;
}

.btn {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important;
}

.btn-primary {
  background-color: #455A64;
  border: none;
  outline: none;
}
.btn-primary.active {
  background-color: #7C4DFF;
  border: none;
  outline: none;
}
.btn-primary.focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.btn-primary:hover {
  background-color: mix(#455A64, #7C4DFF, 50%);
}
.btn-primary.active:hover {
  background-color: #7C4DFF;
}

#credits {
  color: #FFFFFF;
}

a {
  color: darkblue;
}

a:visited {
  color: black;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />