JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

Direct Bookings
<input name="direct" type="text">
<br>

OTA Bookings
<input name="ota" type="text">
<br>

Average room rate (£)
<input name="average" type="text">
<br>

Average OTA
<input name="otapercent" type="text" value="20">%
<br>


Your average direct booking rate is:
<span class="current_conversion"></span><span>%</span>
<br>

Current OTA Commission:
<span>£</span><span class="current_sales"></span>
<br>

Adjust direct booking rate:
<input name="newconversion" type="text"><span>%</span>
<br>

Total increase in sales:
<span>£</span><span class="sales_increase">0</span>
<br>

JavaScript

jQuery(':input').bind('keypress keydown keyup change', function() {

  var directNumber = parseFloat(jQuery(':input[name="direct"]').val()),
    otaNumber = parseFloat(jQuery(':input[name="ota"]').val()),
    averNumber = parseFloat(jQuery(':input[name="average"]').val()),
    otapercentNumber = parseFloat(jQuery(':input[name="otapercent"]').val()),
    newDirect = parseFloat(jQuery(':input[name="newconversion"]').val());
  var sales = '';
  var conversion = '';
  var newpercent = '';
  var newtotal = '';
  var newota = '';
  var salesincrease = '';
  
  if (!isNaN(directNumber) && !isNaN(otaNumber) && !isNaN(averNumber)) {
    conversion = (directNumber) / ((directNumber) + (otaNumber)) * 100  
  }
  
  if (!isNaN(otapercentNumber) && !isNaN(otaNumber) && !isNaN(averNumber)) {
    sales = ((otaNumber) * (averNumber)) * ((otapercentNumber) / 100 );
  }
  
  if (!isNaN(newDirect)) {
  	newpercent = ((newDirect)/100) * ((directNumber) + (otaNumber));
  	newota = ((directNumber) + (otaNumber)) - (newpercent);
   	newtotal = ((newota) * (averNumber)) * ((otapercentNumber)/100);
    salesincrease = (sales) - (newtotal) ;
  }
  
  jQuery('.current_sales').html(sales.toFixed(2));
  jQuery('.current_conversion').html(conversion.toFixed(2));
  jQuery('.sales_increase').html(salesincrease.toFixed(2));

});