JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div>
    Min Area Rent<br />
    <input type="number" id="lower" value="0" />
</div>
<div>
    Max Area Rent<br />
    <input type="number" id="upper" value="0" />
</div>
<div>
    Current Rent<br />
    <input type="number" id="rent" value="0" />
</div>
<div>
    <button id="calc">Calculate</button>
</div>

<div>
    <p id="increase"></p>
</div>

JavaScript

function calc(){
    var lower = parseFloat($('#lower').val());
    var upper = parseFloat($('#upper').val());
    var ldata = {
        averageRent: (lower + upper)/2,
        rent: $('#rent').val()
    }
        var sp = (ldata.averageRent / 100);
        var diff = ldata.rent - ldata.averageRent;

        // Postive diff
        if(diff < 0){ diff = 0 - (diff); }
    
        // Band calc
        var increase = 0;
        // over 10%
        if(diff > (sp * 10)){
          increase = 0.05;
          // over 20%
          if(diff > (sp * 20)){
            increase = 0.1;
            // over 30%
            if(diff > (sp * 30)){
              increase = 0.15;
              // over 40%
              if(diff > (sp * 40)){
                increase = 0.2;
              }
            }
          }
        }
    
    $('#increase').html('Average: '+ldata.averageRent+'<br />Increase: '+(100 * increase)+'%<br />Diff: '+diff);
}

$('#calc').click(calc);