Notes on Credit Card Calculation
This is an explanation of the html / JavaScript program plus comments on how credit
cards work. Let's began with the latter. Credit cards allow consumers to make purchases
without using cash. They represent loans from the credit card company to the consumer.
The billing cycle generally is a month (more on this later). That is, each month, the
consumer gets a bill.
For the most part, if the consumer pays off the loans, also termed the balance,
immediately, that is, as soon as he or she gets the monthly bill, it is a free loan, that is, no
interest or other charges. If the consumer does NOT pay off the balance, there generally
is a minimum amount that needs to be paid. If this minimum is not met, the next bill will
show a fee plus interest charges added in to the balance. If the consumer pays the
minimum, but not the whole balance, interest charges are added to the balance. The
new balance would be the old balance, minus the payment, plus the interest, plus any fee
and plus the cost of any new purchases. Thus, over time, the consumer is paying interest
on the interest. This phenomenon of interest on interest is called compound interest and it
is a very nice thing if it is working on your behalf, that is, on investments. It is a very
mean thing when working against you, as it is in credit card debt. Paying only the
minimum, while making new purchases, generally means that you get deeper and deeper
in debt.
The calculation of the interest charges may be more complex that the JavaScript program
shows. The credit card company has made you a loan from the time of your purchase (or,
possibly slightly later depending on its arrangements with the retailer accepting the credit
card for the purchase) to when you pay the bill. If you pay up, the credit card company
does not charge interest for this period of time. If you do not pay up, many credit card
companies charge interest from the date of purchase! Moreover, the balance is computed
on a daily basis; the compounding takes place each day. This means your debt increases
more rapidly. Often, the company offers different rates of interest for opening an account,
transfer of a balance from another card, cash advances, etc. If it is daily compounding,
the number is divided by 365 (I don't know the practice in leap years). You can use a
spreadsheet program or the Wolfram browser add-on to compare the effects of daily
compounding versus monthly versus yearly.
The JavaScript program computes the interest on a monthly basis. The interest rate shown
is the annual interest. You can change this from the initial value of 15. The calculation
uses this amount divided by 100 to get from a percentage to a fraction and then divided
by 12 (12 months in a year).
The minimum payment in the JavaScript program has the initial value of 50. It can be
changed. Some credit card companies have a fixed minimum payment. Some have an
amount dependent on the balance and some use a combination, for example, the
maximum of a set amount and a percentage of the balance.
Credit card companies make money when people do NOT pay off the balance in full but
do pay something. Some credit card companies also earn fees from the retailers.
However, the biggest part of their income is from the people who pay something each
time period, but always accrue interest charges. If you do NOT make any new purchases,
and pay the minimum each month, you will pay off your debt eventually but at a slower
rate than you may expect. This program shows this. However, keep in mind that the
actual situation can be complex and not in your favor, due to the probable daily
compounding and different rates and fees.
Here is the initial screen:
This is implemented using an html form containing <input> elements for
Balance
New Purchases
Annual Interest Rate
Minimum Payment
Fee for not paying min.
Your payment
This is the accumulated amount owed
This is the total of the new purchases this month.
This appears as 15, meaning 15%. It can be changed.
This appears as 50. It can be changed.
This appears as 100. It can be changed.
This is what the user chooses to pay
The form has a submit button and the onSubmit is set to "return calc()". This means
the JavaScript program will pick up the values from the form. The code uses the
Number function because the information in the form input fields is all text and must be
converted to numbers. The code then calculates the new balance and does the rest of the
calculations. Finally, the code resets fields in the form to be the new balance, with the
new purchases and payment input values reset to 0.00. The calculation includes a nested
if statement checking if the new balance is being paid off and, if not, if the minimum is
being met.
The code includes a call to a function moneyf that formats the output into standard
dollars and cents, that is, exactly 2 numbers to the right of the decimal point. It would be
bad to display money as 240.8 or 240.852.
Suppose you made $240 in purchases and then paid the minimum: $50. You enter in this
information:
and then click on CALCULATE. The screen will now show this:
The $2.37 represents the interest on the unpaid balance of $240 - $50. Suppose for this
next billing cycle, you do NOT make any new purchases, and pay $50 again:
The next screen is:
The balance is decreasing but slowly! Pay off those balances.
Here is another scenario: relatively low balance and new purchases, but with only a low
payment:
Here is the next screen with the new balance:
I mad
I made a late modification of the program concerning the focus. When presenting forms,
it may be a good idea to set the cursor to a specific field. This is done in my example in
two places. The <body> element is
<body onLoad="document.f.newp.focus();">
In the calc function, this expression is repeated as a statement:
document.f.newp.focus();
Comments (on the program and on the notes) welcome.
The code in full is:
<html>
<head>
<title>Credit Card Calculation</title>
<script>
function calc() {
var bal = Number(f.balance.value);
var nstuff = Number(f.newp.value);
var rate=Number(f.interest.value)/100;
var minp=Number(f.minum.value);
var fee = Number(f.fee.value);
var pay=Number(f.pay.value);
var charges=0.0;
bal = bal + nstuff;
if (bal>0) {
if (pay>=bal) {
f.balance.value = "0.00";
}
else {
minp = Math.min(minp,bal);
if (pay<minp) {
charges+=fee;
}
bal = bal - pay;
charges+=bal*rate/12;
bal = bal + charges;
f.balance.value = moneyf(bal);
}
f.pay.value = "0.00";
f.newp.value = "0.00";
document.f.newp.focus();
}
return false;
}
function moneyf(amt) {
var amts = String(amt);
var dp = amts.indexOf(".");
if (dp<0) {
return amts+".00";
}
else {
amts = amts+"00";
return amts.substr(0,dp+3);
}
}
</script>
</head>
<body onLoad="document.f.newp.focus();">
<center>
Calculate Next Month's Balance
</center>
<form name="f" onSubmit="return calc();">
Balance: $
<input name="balance" value="0.00" />
<br/>
New Purchases: $
<input name="newp" value="0.00"/>
<br/>
Annual Interest rate:
<input name="interest" value="15"/> %
<br/>
Required minimum payment: $
<input name="minum" value="50.00"/>
or what is owed, whatever is the least.
<br/>
Fee for not paying minimum: $
<input name="fee" value="100.00"/>
<br/>
<br/>
Your payment: $
<input name="pay" value=""/>
<br/>
<br/>
<input type="submit" value="CALCULATE"/>
You can continue for the next month's calculation.
</form>
</body>
</html>