GDAX Order Book

by Matt Hopkins

HTML

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div id="container">
  <h3 id="bids"></h3>
  <i id="arrow" class="fas fa-9x"></i>
  <h3 id="asks"></h3>
  <hr/>
  <h3 id="bidsPrice"></h3>
  <h3 id="asksPrice"></h3>
  <hr/>
  <h3 id="btcPrice-Up"></h3>
  <h3 id="btcPrice-Down"></h3>
  <button id="control">Pause</button>
</div>

CSS

#container {
  text-align: center;
}

#bids, #bidsPrice {
  color: green;
}

#asks, #asksPrice {
  color: darkred;
}
/*
#bidsPrice, #asksPrice {
  display: inline;
}
*/
#arrow {
  display: none;
}

JavaScript

function updateData() {
  $.ajax({
    dataType: "json",
    url: "https://api.gdax.com/products/BTC-USD/book?level=2",
    data: 'data',
    success: function(data) {
      var bids = 0; //green
      var asks = 0; //red
      var bidsPrice = 0;
      var asksPrice = 0;
      var bidsTotal = 0;
      var asksTotal = 0;

      for (i = 0; i < data.bids.length; i++) {
        bidsPrice += parseFloat(data.bids[i][0]);
        bids += parseFloat(data.bids[i][1]);
        bidsTotal += parseFloat(data.bids[i][2]);
      }

      for (i = 0; i < data.asks.length; i++) {
        asksPrice += parseFloat(data.asks[i][0]);
        asks += parseFloat(data.asks[i][1]);
        asksTotal += parseFloat(data.asks[i][2]);
      }
      
      //bids = parseFloat(bids).toFixed(8);
      //asks = parseFloat(asks).toFixed(8);

      console.log(bids);
      console.log(asks);
      console.log(bidsPrice/50);
      console.log(asksPrice/50);
			console.log('BTC: ' + (((bidsPrice/50) + (asksPrice/50)) / 2));
      
      $('#bids').text(bids);
      $('#bidsPrice').text('$' + (bidsPrice/50));
      $('#asks').text(asks);
      $('#asksPrice').text('$' + (asksPrice/50));
      $('#btcPrice-Up').text('Up: $' + (((((bidsPrice/50) + (asksPrice/50)) / 2) + (asksPrice/50)) / 2));
      $('#btcPrice-Down').text('Down: $' + (((((bidsPrice/50) + (asksPrice/50)) / 2) + (bidsPrice/50)) / 2));
      
      if (bids > asks) {
      	$('#arrow').removeClass("fa-arrow-alt-circle-down");
      	$('#arrow').removeClass("fa-arrow-alt-circle-up");
      	$('#arrow').addClass("fa-arrow-alt-circle-up");
        $('#arrow').css('color', 'green');
        $('#arrow').show();
      } else {
      	$('#arrow').removeClass("fa-arrow-alt-circle-down");
      	$('#arrow').removeClass("fa-arrow-alt-circle-up");
      	$('#arrow').addClass("fa-arrow-alt-circle-down");
        $('#arrow').css('color', 'darkred');
        $('#arrow').show();
      }
    }
  });
}

$(document).on('click', '#control', function(){
	if...