Budget Calculator Generator

Creating a budget calculator seems like a relatively simple thing to do (since the calculations are relatively straightforward). In fact it is somewhat more involved than it would appear. Not only do you need to create the form and set up a Javascript function that will perform the calculations but you also need to validate all of the fields that are being input to the form.

This can be a relatively long task even where you know exactly what code you need to write to perform all of the validations. How much simpler would it be if you could just enter the descriptions that you want to use for the calculator and have the form and the associated Javascript created for you. Well on this page you can.

Let's start by giving our calculator a title (this should be alphanumeric ie. letters, numbers, and spaces only).

Title:

Next, I assume that you need one or perhaps two fields that will provide the available funds or income (or whatever you decide to call it for your calculator). We'll also allow for an optional heading above these field(s). Headings should be alphanumeric, descriptions can also contain / ( * and ).

Heading:
Descriptions:
 

Next for what those funds can be spent on. We'll allow for an optional heading and up to twenty expenses (or whatever you want to call them). These expenses can be either one off or periodic. Where there are periodic expenses we'll also want to allow the number of periods to be entered so that the periodic expenses can be multiplied by the number of periods. The checkbox to the right of the descriptions will flag those entries where a per period amount is to be entered. Your description should indicate which entries are one off and which are per period when you use both.

Heading:
Descriptions:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

If you selected to have per period fields then you will need to define what that period is (eg. day, month).

Period:

The last field that we need is one to display the result of the calculation so that we can see if we have sufficient funds or have a shortfall. We'd better give this result field a name too.

Description:

Now all you need to do is to press the following button and let this web page create your budget calculator for you. The required HTML and Javascript code will be generated in the textareas below.

HTML
Javascript

Simply paste the HTML into your web page where you want your budget calculator to appear. The Javascript goes in a separate file (perhaps called budget.js and you then link it into your web page by placing the following into the head of your page.

<script type="text/javascript" src="budget.js"></script>

By changing the field descriptions and the number of expense fields that are periodic you should be able to use this budget calculator generator to generate a wide range of calculators for your site.

The generated code also defines a budcalc class that you can use to style your calculator. So if you want to give your Calculator a yellow background and a black border and give the title a green background you could define the following entry in your stylesheet.

.budcalc {background-color:#ffc; border:1px solid #000;}
.budcalc h3 {background-color:#0f0;}

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate