Accrue.js

A loan and interest calculation plugin for jQuery.

About Demos Documentation Download

What is it?

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.

Demos

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!

^ Top of Section

Basic Loan Calculation

Grabs three values from the form, and returns general information about a loan.

^ Top of Section

Interest Savings Calculation

Grabs four values from the form, and returns general information about a loan.

^ Top of Section

Amortization Schedule Calculation

Grabs three values from the form, and displays a complete amortization schedule for the provided loan information.

Docs

Documentation

Let's go over some code!

^ Top of Section

Introduction

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 jquery.accrue.min.js.


Requirements

  • jQuery 1.10+ (and legacy 1.4.0+) - Recommend Latest
  • A bit of CSS knowledge couldn't hurt.

A Note About Styles

The 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.


The HTML

There are a ton of plugin options and ways to customize your calculators, but for this chunk of code, we'll just focus on the bare minimum of what you need to start seeing a working calculator:

^ Top of Section

Plugin Options

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.

mode
The mode option has 3 settings: basic (default), compare, or amortization. The demos above illustrate the difference between the modes.
operation
The operation option has two settings: keyup and button. keyup, the default option, will do the calculation when the user changes a value in an input. The button option forces a button to be displayed in the form that must be clicked in order to do the calculation.
default_values
The default_values option 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.
field_titles
Add this section and adjust the values to override field labels on generated form elements. This doesn't take effect for inputs that you manually supply in the calculator container.
button_label
Adjust the button_label property 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.
field_comments
This property lets you add or modify the text that shows up below fields generated by the plugin. This doesn't take effect for inputs that you manually supply in the calculator container.
response_output_div
The selector for the div to which the plugin will output the response. Use this parameter if you need to output the response to a div that's not inside the calculator element and doesn't have a class of 'results'.
response_basic
Adjust the message that displays when outputting mode: 'basic' calculations. Use %payment_amount%, %num_payments%, %total_payments%, and %total_interest% to tell the plugin where to put the calculation totals.
response_compare
Adjust the message that displays when outputting mode: 'compare' calculations. Use %savings% to tell the plugin where to place the calculated total savings.
error_text
Adjust the message that displays when any one of the inputs isn't populated.
callback( elem )
Provide a callback function with code to be executed whenever a calculation occurs. Use this to add animations to the divs or update a separate response div with your own formatted response. Here's an example of how you'd set up for this:
^ Top of Section

Customization

This section covers how calculators generated by the plugin can be customized to fit your design or CMS needs.


Create Your Own Inputs

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.

Amount Input
Generally, this should be an input[type=text] (though select tags are also allowed). Any of these classes or names will work (in order of detection):
Rate Input
The rate can be either an input[type=text] or select. Any of these classes or names will work (in order of detection):
Comparison Rate Input
This follows all the same requirements as the rate field, except that the field name or class must be rate_compare. Any of these classes or names will work (in order of detection):
Note the select list. 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.
Term Input
The term field can be an input[type=text] or select tag. Any of these classes or names will work (in order of detection):
Comparison Term Input
This field must be added to the form manually - by default the calculator uses the same term for both of the loans it's comparing, so to override the comparison term, simply create a field in this format:
^ Top of Section

Calculation Only (JSON)

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.

amount
The amount property can contain any characters. All but the numbers 0123456789 and dots . will be stripped out, so that no errors can occur - even when those wonderful users enter characters that have no place in math equations.
rate
The rate property 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.
term
The term property 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 m (months) or 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 0

Response JSON

The code sample above would output this JSON object in the javascript console.

Download Accrue.js

Visit the project on Github for updates or just download the source and dig in!

Accrue.js on Github Download Latest

Comments

comments powered by Disqus