JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<form id="calculator" method="post" name="calculator" onsubmit="return cwCalc();">
<div class="container" id="sum">
<div class="calContLeft"><div class="calTit1">DEBT FREE</div><div class="calTit">Credit Card Calculator</div><div class="calLeft">
<div class="rbit"> </div><div class="lbit"> </div><div class="label">What is your credit card balance?</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="aVal"><div class="help"></div><span class="qtip">Please enter the total balance owed on your credit card.</span></a>
<div class="pnd">£</div><div class="frm"><input type="tel" id="cwBalance" name="cwBalance" onkeyup="this.value = numFormat(this.value)"></div>
<div class="clear"></div>
<div class="rbit"> </div><div class="lbit"> </div><div class="label">What is the interest rate?</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="aVal"><div class="help"></div><span class="qtip">Please enter the interest rate on your credit card.</span></a>
<div class="perc">%</div><div class="frm"><input type="tel" id="cwRate" name="cwRate" onkeyup="this.value = numFormat(this.value)"></div>
<div class="clear"></div>
<div class="rbit"> </div><div class="label">Choose monthly payment amount or <br>desired months until debt free</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="aJapp"><div class="help"></div><span class="qtip">Please choose the amount you wish to pay per month or the number of months you wish to pay until debt free.</span></a>
<div class="radio2">
<input type="radio" name="sec" id="secApp" value="single" onclick="if(this) document.getElementById('amou').style.display='block', document.getElementById('month').style.display='none';"><label for="secApp">Amount</label>
<input type="radio" name="sec" id="secApp2" value="joint" onclick="if(this) document.getElementById('month').style.display='block',...CSS
body {background-color:#fff;}
.hide {display:none;}
.container {margin:auto;font-family:arial;font-size:14px;max-width:1000px;}
.calContLeft {float: left;background-color:#F4F4F3;min-width:340px;width:38%;border:1px solid #ccc;margin-right:10px;}
.calContRight {background-color:#fff;margin-left:42%;border:1px solid #ccc;background-color:#F4F4F3;}
.calLeft {padding:10px;}
.calRight {font-size:16px;padding:10px;text-align:center;}
.calTit1 {background-color:#00A3D9;color:#fff;text-indent:10px;padding:9px 0;font-size:22px;}
.calTit {background-color:#1F73C9;color:#fff;text-indent:10px;padding:8px 0;margin-bottom:10px;font-size:18px;}
.other {background-color:#ccc;color:#fff;text-indent:10px;font-weight:bold;padding:2px 0;}
.clear {clear:both;}
.pnd, .lbit {float:left;}
.help, .rbit, .perc {float:right;}
.rbit, .lbit {width:30px;}
.bigreen {font-size:20px;color:#59B200;}
.pnd, .help, .perc {line-height:40px;height:40px;width:30px;text-align:center;}
.help {margin-left:4px;background-color:#00A3D9;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAATlBMVEUAAAD8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vtBtc/dAAAAGXRSTlMABPLJmYF1Uz+vb0cW5+S8uZOIamM6LSELBgohPwAAAEtJREFUCB0FwYcBwkAABCC+pWvsevsvKoD1VuCVTLAmEyxtAADLAfuZwe9Rk8HoPZkp7qkflJZW8L2kKyzJNG88k9p2ttR+4H2d8QfB0ANY90orPAAAAABJRU5ErkJggg==');background-repeat: no-repeat;background-position:center center;}
.pnd, .perc{background-color:#1F73C9;color:#fff;font-weight:bold;}
.label {font-size:16px;margin-bottom:2px;}
.frm {height:38px;overflow: hidden;border:1px solid #1F73C9;padding:0 10px;background-color:#fff;margin:0 0 15px 0;}
.frm input, .frm select {width:100%;border:0;margin:0;font-size:16px;}
.frm input {height:37px;}
.frm select {height:39px;border:0px;outline:0px;-webkit-appearance: none;-moz-appearance: none;text-indent: 1px;text-overflow: '';background-color: transparent;}
.textr {text-align:right;}
.calculate...JavaScript
<!-- Credit Card Calculator with estimated months to pay off -->
function cwCalc(){
var cwBalance = +document.calculator.cwBalance.value.replace(/[^0-9]/g, "");
var cwRate = +document.calculator.cwRate.value;
if (cwBalance.value=='') {alert('Please enter your credit card balance.'); return;}
if (cwRate.value=='') {alert('Please enter your credit card\'s interest rate.'); return;}
if (document.getElementById('secApp').checked) {
var cwMonthlyAmount = +document.calculator.cwMonthlyAmount.value.replace(/[^0-9]/g, "");
cwDesiredMonths = '0';
}
else {
var cwDesiredMonths = +document.calculator.cwDesiredMonths.value;
cwMonthlyAmount = '0';
}
var mRate=(cwRate/100)/12;
if (cwMonthlyAmount == 0) {
var payment=cwBalance*(mRate)/( 1-Math.pow((1+mRate),(-cwDesiredMonths)) );
payment=Math.round(payment*100)/100;
cwResult.innerHTML=cwDesiredMonths + " Months";
cwResult2.innerHTML="£" + (payment*cwDesiredMonths).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
cwResult3.innerHTML="£" + payment.toFixed(2) + " per month";
} else {
var remainingBalance=cwBalance;
var minPayment=mRate*cwBalance;
var months=0;
var lastPayment;
if (minPayment>cwMonthlyAmount) {alert ('Your monthly payment is less than the monthly interest charged by this card.');return;}
while (remainingBalance>0)
{
months++;
remainingBalance=remainingBalance*(1 + mRate)-cwMonthlyAmount;
}
cwResult.innerHTML=months + " Months";
cwResult2.innerHTML="£" + (cwMonthlyAmount*months).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
cwResult3.innerHTML="£" + cwMonthlyAmount + " per month";
}
document.getElementById("test1").innerText = cwBalance;
document.getElementById("test2").innerText = cwRate;
document.getElementById("test3").innerText = cwMonthlyAmount;
document.getElementById("test4").innerText = cwDesiredMonths;
return false;
}
/* Tool Tip */
function tog(el){if(el.className == "tt"){el.className = "tt2";}
else {el.className = "tt";}
}
function...