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 peform 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).

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.

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.