Accrue.js is a jQuery plugin for providing loan and interest calculations on web pages. It's small, fast, flexible, and forgiving.
Small: The minified version of the plugin is under 5kb.
Fast: It loads and executes quickly, and instantly provides results as your user types.
Flexible: Don't want it to calculate on keyup? There's a setting for that. Want to execute your own code every time the the tool calculates? Just provide a callback function. With every setting in the plugin accessible, you can completely customize the experience.
Forgiving: If you don't provide it with fields that are required to perform calculations, it will add them to the bottom of the form. If you don't provide it with a form or results div to begin with, you guessed it - it creates them. It will operate when trained on a completely empty div or use any fields you provide yourself.
Check out the demos to see what it can do.
Enough talk, let's check out some demos!
Explore the examples on this page to see what it can do, or visit the Github repo to download the code and start playing!
Grabs three values from the form, and returns general information about a loan.
Grabs four values from the form, and returns general information about a loan.
Grabs three values from the form, and displays a complete amortization schedule for the provided loan information.
Accrue.js is a jQuery plugin, so it requires a version of jQuery to be installed. The only other file you need to get started is
example.css file that's included in the repo is NOT intended to be used with the plugin - it mainly contains styles for the example page, and while some of those styles affect the calculator elements, most of them do not and would just add unnecessary code to your codebase.
To keep the plugin small and flexible, it doesn't include a stylesheet at all, allowing you to set any styles you need/want.
I pulled from the best options plugin templates I could find to provide the most flexible plugin possible. I still want to add more, but here's a complete example with all the current default option values.
modeoption has 3 settings:
amortization. The demos above illustrate the difference between the modes.
operationoption has two settings:
keyup, the default option, will do the calculation when the user changes a value in an input. The
buttonoption forces a button to be displayed in the form that must be clicked in order to do the calculation.
default_valuesoption is used to set initial values for the fields in the form. This only takes effect when the plugin is creating fields for you - if you are manually creating fields in your calculator form, the plugin will grab the value (including an empty value) from the code you specify. See the customization section for more information about that.
button_labelproperty to set the text (and other HTML) to display on the button that the plugin generates. This doesn't take effect if you supply your own inputs.
mode: 'basic'calculations. Use
%total_interest%to tell the plugin where to put the calculation totals.
mode: 'compare'calculations. Use
%savings%to tell the plugin where to place the calculated total savings.
callback( elem )
This section covers how calculators generated by the plugin can be customized to fit your design or CMS needs.
If you don't like the way the plugin auto-generates a field, simply create the field in your calculator div with the correct class or name, and the plugin will use your field instead of generating its own. If you create your own inputs in the calculator, it's also a good idea to add a
div.form inside the calculator div and then place your field inside it, like so:
Doing this will ensure that any fields that the plugin has to generate, will show up directly after the fields you added. Here are a few details on the different fields, types of inputs, and the names or classes that the plugin will detect.
selecttags are also allowed). Any of these classes or names will work (in order of detection):
select. Any of these classes or names will work (in order of detection):
ratefield, except that the field name or class must be
rate_compare. Any of these classes or names will work (in order of detection):
selectlist. This could be used to create a picklist of credit score ranges and the rate that your financial institutions' loan would be at for that score range - this would allow your website visitors to see how much they could save in interest if they got their loan from you.
selecttag. Any of these classes or names will work (in order of detection):
None of the
$( selector ).accrue(); options doin' it for you? Never fear - I left the
$.loanInfo( param_obj ); function public, so you can directly call it to perform a calculation and get a JSON response.
amountproperty can contain any characters. All but the numbers
.will be stripped out, so that no errors can occur - even when those wonderful users enter characters that have no place in math equations.
rateproperty will get the same cleaning treatment as the
amount, so no worries when it comes to bad math characters. The function expects the rate to be APR.
termproperty is treated differently than the other two properties. It will take values of either years or months, and will assume months. Specify these values by entering a number and then either
y(years) - though the letter is not required, and if only a number is passed, it's assumed to be a month count, or number of payments.
The numbers in the snippet above are populated just as an example of the type of input this function could accept. The default values for all of the object properties is
Visit the project on Github for updates or just download the source and dig in!