Demonstration of using heat-sdk in a browser to do calculate USD amount to HEAT using Bitfinex and HEAT DEX

<!DOCTYPE html>
<html>

  <head>
    
    <!-- Please note that we use https://getmdl.io/components for quick and easy page 
         styling and for our client components. Look on their website to see how to use
         Material Design Lite -->
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>  
    <link rel="stylesheet" href="style.css"> 
    
    <!-- Please note how we hardcode the use of heat-sdk version, 0.3.3 in this case -->
    
    <script src="https://unpkg.com/heat-sdk@0.3.3/dist/heat-sdk.umd.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      $(document).ready(function () {
        function refresh() {
          var sdk = new heatsdk.HeatSDK()
          function getBTCUSD() {
            return fetch("https://api.coindesk.com/v1/bpi/currentprice/USD.json")
              .then(response => response.json())
              .then(response => response.bpi.USD.rate.replace(/,/g,''))
          }
          function getHEATBTC() {
            return sdk.api.get("/exchange/market/5592059897546023466/0/0/0")
              .then(response => String(parseInt(response.lastPrice) * 0.00000001))
          }
          function getHEATUSD() {
              return getBTCUSD().then(btcusd => 
                  getHEATBTC().then(heatbtc => String((parseFloat(btcusd) * parseFloat(heatbtc))))
              )
          }
          getHEATUSD().then(heatusd => {
              var priceInUSD = parseFloat($("#usd").val())
              var total = parseFloat(priceInUSD) / parseFloat(heatusd)
              $("#heat").val(total)
              $('#heat').parent().addClass('is-dirty'); 
          })          
        }
        refresh()
        $("#btn").click(refresh)
      })
    </script>
  </head>

  <body>
    <h3>HEAT-SDK | Live DEX USD to HEAT</h3>
    
    <h6>Sample shows how to convert USD to HEAT with help of HEAT-SDK and the decentralized HEAT exchange</h6>
    
    <div class="demo-card-wide mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Live DEX USD to HEAT</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <form action="#">        
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="usd" value="1000.00">
            <label class="mdl-textfield__label" for="sample3">Amount USD ...</label>
          </div>        
        
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="heat" readonly>
            <label class="mdl-textfield__label" for="sample3">Amount HEAT ...</label>
          </div>        
        </form>        
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="btn">
          Refresh
        </a>
      </div>
    </div>    
    
  </body>
</html>

body {
  padding: 10px;
}
.demo-card-wide.mdl-card {
  width: 512px;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('http://www.tnooz.com/wp-content/uploads/2013/08/money-space-travel.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
.bigger {
  font-size: 16px;
  margin-bottom: 8px;
}