JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<h2>

</h2>
<div>
  <input type="number" id="totalUnits" placeholder="Enter Units" />
</div>
<div>
  <input type="button" id="cBill" class="btn" value="See Bill">
  <input type="text" id="amount" readonly placeholder="Your Bill will be ..." />
</div>

CSS

.btn {
  margin: 20px 20px 0 0;
}

JavaScript

$("#totalUnits").on("keydown",function(){
$("#amount").val("");
});

$("#cBill").on("click",function(){
var unit = Number($("#totalUnits").val());
//console.log(typeof unit);
if (unit < 0) return false;
/*
0 - 40 units per month 270/kWh 
41-250 units per month 450/kWh 
251-500 units per month 525/kWh 
501-800 units per month 598/kWh 
*/
var amount = 0;
if (unit >= 801 ) {
alert("Your bill above all ebill slabs, you will be charged at flat 5.98");
amount = unit*5.98;
$("#amount").val(amount.toFixed(2));
return false;
}
var orig_unit = unit;

if ( orig_unit <= 40) {
amount += orig_unit*2.70;
}
else if (orig_unit >= 41 && orig_unit <= 250) {
 orig_unit -= 40;
amount =  (40*2.70 )+ orig_unit*4.50;
}

else if (orig_unit >= 251 && orig_unit <= 500) {
orig_unit -= 250;
amount = (40*2.70)+(250*4.50) + (orig_unit-40)*5.25;

}
else if ( orig_unit >= 501 && orig_unit <= 800) {
orig_unit -= 500;
amount = (40*2.70)+(250*4.50) +(500*5.25) + (orig_unit-290)*5.98;
}

$("#amount").val(amount.toFixed(2));


});