JSFiddle - React, Tailwind, and code Playground
HTML
<div class="calculator">
<form action="#" name="ratescalc">
<div class="calculator__inputs">
<div class="calculator__inputs__item">
<div class="calculator__inputs__label">
<label for="Purprice">Purchase Price or Mortgage Amount</label>
<input type="text" id="Purprice" name="Purprice" placeholder="Enter price..">
</div>
</div>
<div class="calculator__inputs__item">
<div class="calculator__inputs__label">
<label for="PCCost">Premium, Stamps or Tax</label>
<input type="text" id="PCCost" name="PCCost" value="0.00">
</div>
</div>
</div>
<div class="calculator__buttons">
<button data-but="insurance-premium">Title Insurance Premium</button>
<button data-but="florida-stamps-deed">Florida Documentary Stamps on Deed</button>
<button data-but="florida-stamps-mortgage">Florida Documentary Stamps on Mortgage</button>
<button data-but="florida-stamps-deed-single">Dade - Documentary Stamps on Deed (single family)</button>
<button data-but="florida-intangible">Florida Intangible Tax on Mortgage</button>
<button data-but="dade-surtax">Dade - Documentary Stamps & Surtax on Deed (non-single family)</button>
</div>
</form>
</div>
CSS
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
font-family: Tahoma, sans-serif;
font-size: 14px;
padding-top: 100px;
}
.wrap {
width: 960px;
margin: 0 auto;
}
.calculator {
background: #F0F0F0;
padding: 20px 20px 5px;
}
.calculator__inputs__item {
width: 49%;
margin-right: 2%;
}
.calculator__inputs__item:last-child { margin: 0; }
.calculator__inputs {
display: flex;
margin-bottom: 15px;
}
.calculator__inputs__label {
display: flex;
flex-direction: column;
}
.calculator__inputs__label label {
margin-bottom: 8px;
}
.calculator__inputs__label input[type="text"], #selectService {
width: 100%;
padding: 10px 15px;
font-size: 18px;
}
.calculator__buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.calculator__buttons button, #doit {
width: 32%;
margin: 0 0 15px 0;
outline: none;
border: none;
display: inline-block;
cursor: pointer;
font-weight: 700;
font-family: "Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
background: #23b533;
font-size: 13px;
padding: 10px 15px;
border-radius: 3px;
text-transform: uppercase;
color: #fff;
}
#doit {
width: auto;
margin-top: 20px;
}
.calculator__buttons button:hover {
background: #2ECC40;
}
JavaScript
$(".calculator__buttons button").on('click', function(){
var dataButton = $(this).data('but');
switch(dataButton) {
case 'insurance-premium':
calcFLInsurPremium(document.ratescalc.Purprice, document.ratescalc.PCCost);
return false;
break;
case 'florida-stamps-deed':
calcFLTaxOnMortgage(document.ratescalc.Purprice, 1, document.ratescalc.PCCost);
return false;
break;
case 'florida-stamps-deed-single':
calcFLTaxOnMortgage(document.ratescalc.Purprice, 4, document.ratescalc.PCCost);
return false;
break;
case 'florida-stamps-mortgage':
calcFLTaxOnMortgage(document.ratescalc.Purprice, 2, document.ratescalc.PCCost);
return false;
break;
case 'florida-intangible':
calcFLTaxOnMortgage(document.ratescalc.Purprice, 3, document.ratescalc.PCCost);
return false;
break;
case 'dade-surtax':
calcFLTaxOnMortgage(document.ratescalc.Purprice, 5, document.ratescalc.PCCost);
return false;
break;
}
});
var MAX_MORTGAGE_DIGITS = 30
var TX_TYPE_DOC_STAMP_ON_DEED = 1
var TX_TYPE_DOC_STAMP_ON_MORTGAGE = 2
var TX_TYPE_INTANGIBLE_TAX = 3
// dade county documentary stamp on single family home
var TX_TYPE_DADE_SINGL_DSTAMP_ON_DEED = 4
// dade county documentary stamp on non-single family home
var TX_TYPE_DADE_NONSINGL_DSTAMP_ON_DEED = 5
var FL_INTANGIBLE_TAX_MULTIPLIER = 0.002
var FL_DOC_STAMP_ON_MORT_MULTIPLIER = 0.35
var FL_DOC_STAMP_ON_DEED_MULTIPLIER = 0.70
// multiplier for dade county documentary stamp on single family home
var DADE_FL_SINGL_DSTAMP_ON_DEED_MULTIPLIER = 0.60
// multiplier for dade county documentary stamp on non-single family home
var DADE_FL_NONSINGL_DSTAMP_ON_DEED_MULTIPLIER = 1.05
var FL_DOC_STAMP_MORT_PER_VALUE = 100.00
var FL_DOC_STAMP_DEED_PER_VALUE = 100.00
var ONE_HUNDRED_THOUSAND = 100000.00
var ONE_MILLION = 1000000.00
var FIVE_MILLION = 5000000.00
var TEN_MILLION = 10000000.00
var FL_UPTO_100K_MULTIPLIER =...