Bitcoin Real Time Profit Calculator

<!DOCTYPE html>
<html>

<!-- Allows the user to input the current USDBTC exchange rate,
     the USD amount the user wishes to spend, and the range of 
     of exchange rates at the time of sale. From this input,
     purchase information (total amount spent, fee amount, amount
     applied to btc, and btc amount) will be displayed, along with
     a list of loss/profit for sales of exchange rates defined in the
     input.
 -->

<head>
  <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="bitcoinCalc">
    <div class="container">
      <h3>Bitcoin Profit Calculator</h3>
    </div>
    <div class="vert-separator"></div>

    <div class="column pull-left">
      <div class="container">
        <div class="row">
          <label for="exchangeRate">Exchange Rate:</label>
          <input type="text" id="exchangeRate" class="alert" />
        </div>
        <div class="row">
          <div id="exchangeRateSlider"></div>
        </div>
        <div class="row">
          <label for="fee">Fee:</label>
          <input type="text" id="fee" class="alert" />
          <div class="row">
            <div id="feeSlider"></div>
          </div>
          <div class="row">
            <label for="priceRange">Price range:</label>
            <input type="text" id="priceRange" class="alert" />
          </div>
          <div class="row">
            <div id="priceRangeSlider"></div>
          </div>
          <div class="row">
            <label for="amountSpent">Amount spent:</label>
            <input type="text" id="amountSpent" class="alert" />
          </div>
        </div>
        <div class="vert-separator"></div>
        <div class="row">
          <label for="totalAmountSpent">Total amount spent:</label>
          <label id="totalAmountSpent" class="strong"></label>
        </div>
        <div class="row">
          <label for="feeAmount">Fee amount:</label>
          <label id="feeAmount" class="strong"></label>
        </div>
        <div class="row">
          <label for="amountSpentOnBtc">Amount spent on BTC:</label>
          <label id="amountSpentOnBtc" class="strong"></label>
        </div>
        <div class="row">
          <label for="btcReceived">Btc received:</label>
          <label id="btcReceived" class="strong"></label>
        </div>
      </div>
    </div>
    <div class="column pull-right">
      <div class="container">
        <div class="row">
          <table id="results">
            <tr>
              <th>Exchange Rate</th>
              <th>Fee</th>
              <th>Amount Received</th>
              <th>Margin</th>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>

// Code goes here

$(function () {
  
  // globals
  
  var exchangeRate = 1052.00;
  var fee = 0.45;
  var priceRange = [500, 1500];
  var amountSpent = 100.00;
  var btcReceived = 0.00;
  
  
  // Setup
  
  $('#exchangeRate').val('$' + exchangeRate);
  $('#fee').val(fee + '%');
  $('#priceRange').val('$' + priceRange[0] + ' - $' + priceRange[1]);
  $('#amountSpent').val('$' + amountSpent);
  
  
  // Exchange Rate
  
  $('#exchangeRateSlider').slider({
    range: 'min',
    step: 1.00,
    min: 800.00,
    max: 1200.00,
    value: exchangeRate,
    slide: function (event, ui) {
      changeExchangeRate(ui.value); 
    }
  });
  
  $('#exchangeRate').change(function () {
    var val = remove$Char($(this).val());
    
    if (isNumber(val))
      changeExchangeRate(val);
  });
  
  function changeExchangeRate(val) {
    exchangeRate = val;
    
    $('#exchangeRate').val('$' + exchangeRate);
    $('#exchangeRateSlider').slider('option', 'value', exchangeRate);
    updateResults();
  }
  
  
  // Fee
  
  $('#feeSlider').slider({
    range: 'min',
    step: .01,
    min: 0.00,
    max: 2.00,
    value: fee,
    slide: function (event, ui) {
      changeFee(ui.value);
    }
  });
  
  $('#fee').change(function () {
    var val = removePercentChar($(this).val());
    
    if (isNumber(val))
      changeFee(val);
  });
  
  function changeFee(val) {
    fee = val;
    
    $('#fee').val(fee + '%');
    $('#feeSlider').slider('option', 'value', fee);
    updateResults();
  }
  
  
  // Price Range
  
  $('#priceRangeSlider').slider({
    range: true,
    step: 0.50,
    min: priceRange[0],
    max: priceRange[1],
    values: priceRange,
    slide: function (event, ui) {
      changePriceRange(ui.values[0], ui.values[1]);
    }
  });
  
  $('#priceRange').change(function () {
    var pr = splitPriceRange($(this).val());
    
    if (isNumber(pr[0]) && isNumber(pr[1])) {
      changePriceRange(pr[0], pr[1]);
    }
  });
  
  function changePriceRange(min, max) {
    priceRange[0] = min;
    priceRange[1] = max;
    
    $('#priceRange').val('$' + min + ' - $' + max);
    $('#priceRangeSlider').slider('option', 'values', priceRange);
    updateResults();
  }
  
  
  // Amount Spent
  
  $('#amountSpent').change(function () {
    var val = remove$Char($(this).val());
    
    if (isNumber(val))
      changeAmountSpent(val);
  });
  
  function changeAmountSpent(val) {
    amountSpent = val;
    
    $('#amountSpent').val('$' + amountSpent);
    updateResults();
  }
  
  
  
  // Results
  updateResults();
  
  function updateResults() {
    updatePurchaseResults();
    
    var minPrice = priceRange[0];
    var maxPrice = priceRange[1];
    var step = $('#exchangeRateSlider').slider('option', 'step');
    
    var priceStep = (maxPrice - minPrice) / step;
    if (priceStep > 15)
      priceStep = parseInt(priceStep / 15, 10);
    else if (priceStep <= 2)
      priceStep = step;
      
    var rows = [];
    var count = 0;
    for (var i = minPrice; i <= maxPrice; i += priceStep) {
      var td = createResult(i);
      
      rows.push(td);
      
      count++;
      if (count == 15) // bug - doing this causes the list to cut short and exchange rates close to the max price are cut off
        break;
    }
    
    $("#results").find("tr:gt(0)").remove();
    $('#results').append(rows.join(''));
  }
  
  function createResult(exchangeRate) {
    var totalAmountReceived = btcReceived * exchangeRate;
    var sellFee = totalAmountReceived * (fee / 100);
    var amountReceived = totalAmountReceived - sellFee;
    var margin = ((amountReceived - amountSpent) / amountSpent) * 100;
    var dispClass;
    
    if (amountReceived > amountSpent)
      dispClass = 'success';
    else if (amountReceived < amountSpent)
      dispClass = 'danger';
    
    var tdExchangeRate = '<td><span>$' + exchangeRate.toFixed(2) + '</span></td>';
    var tdFee = '<td><span>$' + sellFee.toFixed(4) + '</span></td>';
    var tdAmountReceived = '<td><span>$' + amountReceived.toFixed(2) + '</span></td>';
    var tdMargin = '<td><span class="' + dispClass + '">' + margin.toFixed(2) + '%</span></td>';
    
    return '<tr>' + tdExchangeRate + tdFee + tdAmountReceived + tdMargin + '</tr>';
  }
  
  function updatePurchaseResults() {
    var dFee = amountSpent * (fee / 100);
    var dAmountSpentOnBtc = amountSpent - dFee;
    
    btcReceived = dAmountSpentOnBtc / exchangeRate;
    
    $('#totalAmountSpent').text('$' + amountSpent);
    $('#feeAmount').text('$' + dFee.toFixed(5));
    $('#amountSpentOnBtc').text('$' + dAmountSpentOnBtc);
    $('#btcReceived').text(btcReceived.toFixed(8));
  }
  
  
  
  // Helpers
  
  function remove$Char(string) {
    return string.replace('$', '');
  }
  
  function removePercentChar(string) {
    return string.replace('%', '');
  }
  
  function splitPriceRange(string) {
    
    var pr = string.split('-');
    
    pr[0] = remove$Char(pr[0]).trim();
    pr[1] = remove$Char(pr[1]).trim();
    
    return pr;
  }
  
  function isNumber(val) {
    return !isNaN(parseFloat(val)) && isFinite(val);
  }
    
});

/* Styles go here */

body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 70%;
}

.container {
 margin: 15px;
}

.alert {
  color: #f6931f;
  font-weight: bold;
  font-size: 120%;
}

.success {
  color: green;
}

.danger {
  color: red;
}

.strong {
  font-weight: bold;
}

.deemphasize {
  font-size: 70%;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

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

.center {
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

.vert-separator {
  border-bottom: 1px solid #DDD;
  margin-bottom: 10px;
}

.column:nth-child(odd) {
  border-right: 1px solid #DDD;
}

.column {
  width: 49%;
  left: 1%;
}

#bitcoinCalc {
 width: 650px; 
 background-color: #EEE;
 border-radius: 2px;
 padding: 10px;
 display: inline-block;
}

#bitcoinCalc input {
  width: 50px;
}

#bitcoinCalc h4, p {
  margin: 2px 0 2px 0;
}

#bitcoinCalc table {
  width: 100%;
}

#bitcoinCalc table td, th {
  width: 25%;
  text-align: center;
}

#bitcoinCalc input[type=text] {
  border: 0;
  width: 150px;
  font-weight: bold;
  background-color: inherit;
}

#bitcoinCalc input[type=text]:focus {
  background-color: white;
}