JavaScript Budget Calculator

Javascript Budget Calculator JavaScript Budget Calculator

Do you need a quick and easy way to calculate your budget? If so, check out this JavaScript Budget Calculator.

Click here for the JavaScript Budget Calculator

JavaScript Budget Calculator Source Code

Are you a programmer interested in the source code of this JavaScript? If so, here it is:
(Just Copy and Paste into your HTML Editor and save as a .html file.)
If you use this calculator, please link to this website.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>JavaScript Budget Calculator</title>
<style type=”text/css”>
.dollar-sign {
text-align: right;
margin-bottom: 5px;
border-right: none;
border-top: none;
border-bottom: none;
padding-right: 0px;
border-left: none;
}
.income-name {
text-align: right;
width: 16px;
padding-right: 5px;
margin-bottom: 5px;
border-left:none;
border-right:none;
border-top:none;
}
.number-table {
padding-right: 12px;
padding-left: 12px;
margin-bottom: 5px;
width: 12px;
border: none;
}
.total-row {
background-color: #CCC;
}
.align-middle {
text-align: center;
background-color: #D2F0FF;
border-right: none;
border-left: none;
font-size: 18px;
padding: 5px;
}
.pay-to-input {
width: 210px;
}
.table-heading {
background-color: #FFFFC6;
text-align: center;
color: #0080C0;
padding: 11px;
text-decoration: none;
}
.btn {
font-size: 18px;
background-color: orange;
border: 6 outset black;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
padding-left: 7px;
margin: 5px;
}
.small-button {
font-size: 18px;
background-color: orange;
border: 6 outset black;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
padding-left: 7px;
margin: 5;
}
.calc-table {
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 8px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: center;
border-top: none;
}
.blank-spacer {
background-color: white;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

padding-top:5px;
}
.div-wdith {
width: 400px;
}
</style>
<script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.4.2.min.js’ ></script>
<script type=”text/javascript”></script>
</head>

<body style=”margin:10px 20px 20px 20px”>

<div>

<form>
<table border=”1″ align=”center” cellspacing=”1″ cellpadding=”1″>
<tr>
<td colspan=”3″><h1>JavaScript Budget Calculator</h1></td>
</tr>
<tr>
<td colspan=”3″></td>
</tr>
<tr>
<td colspan=”3″></td>
</tr>
<tr>
<td colspan=”3″> BALANCE – Use this table for current balances. </td>
</tr>
<tr>
<td>Checking Account</td>
<td width=”21″>$</td>
<td width=”202″”>
<input id=”cAct” name=”cAct” type=”text” value=”0″ size=”12″ />

</td>
</tr>
<tr>
<td>Savings Account</td>
<td>$</td>
<td>
<input id=”sAct” name=”sAct” type=”text” value=”0″ size=”12″ />
</td>
</tr>
<tr>
<td>Other</td>
<td>$</td>
<td>
<input id=”oAct” name=”oAct” type=”text” value=”0″ size=”12″ />
</td>
</tr>

<tr>
<td colspan=”3″>
</td>
</tr>
<tr>
<td colspan=”3″></td>
</tr>
<tr>
<td colspan=”3″></td>
</tr>
<tr>
<td colspan=”3″> INCOME – Use this table for income. </td>
</tr>
<tr>
<td>Employment</td>
<td>$</td>
<td”>
<input id=”eInc” name=”eInc” type=”text” value=”0″ size=”12″ />
</td>
</tr>
<tr>
<td>Disability/Retirement</td>
<td>$</td>
<td>
<input id=”dInc” name=”dInc” type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Other</td>
<td>$</td>
<td>
<input id=”oInc” name=”oInc” type=”text” value=”0″ size=”12″ /> </td>
</tr>

<tr>
<td colspan=”3″></td>
</tr>
<tr>
<td colspan=”3″></td>
</tr>
<tr>
<td colspan=”3″>EXPENSES – Use this table for current expenses. </td>
</tr>

<tr>
<td>Rent</td>
<td>$</td>
<td>
<input id=”exp1″ name=”exp1″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Electric</td>
<td>$</td>
<td>
<input id=”exp2″ name=”exp2″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Phone</td>
<td>$</td>
<td>
<input id=”exp3″ name=”exp3″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Gas</td>
<td>$</td>
<td>
<input id=”exp4″ name=”exp4″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Water</td>
<td>$</td>
<td>
<input id=”exp5″ name=”exp5″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Car</td>
<td>$</td>
<td>
<input id=”exp6″ name=”exp6″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Groceries</td>
<td>$</td>
<td>
<input id=”exp7″ name=”exp7″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Cable</td>
<td>$</td>
<td>

<input id=”exp8″ name=”exp8″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Internet</td>
<td>$</td>
<td>
<input id=”exp9″ name=”exp9″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Mobile</td>
<td>$</td>
<td>
<input id=”exp10″ name=”exp10″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Necessities</td>
<td>$</td>
<td>
<input id=”exp11″ name=”exp11″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>Miscellaneous</td>
<td>$</td>
<td>
<input id=”exp12″ name=”exp12″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$</td>
<td>
<input id=”exp13″ name=”exp13″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$</td>
<td>

<input id=”exp14″ name=”exp14″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$</td>
<td>
<input id=”exp15″ name=”exp15″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$</td>
<td>

<input id=”exp16″ name=”exp16″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$</td>
<td>

<input id=”exp17″ name=”exp17″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$</td>
<td>

<input id=”exp18″ name=”exp17″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$</td>
<td>

<input id=”exp19″ name=”exp17″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$</td>
<td>

<input id=”exp20″ name=”exp17″ type=”text” value=”0″ size=”12″ /> </td>
</tr>
<tr>
<td colspan=”3″></td>
</tr>
<tr>
<td colspan=”3″></td>
</tr>
<tr>
<td colspan=”3″ >
<button id=”bCalc” onclick=”return false”>Calculate Budget</button> <br /></td>
</tr>

<tr>
<td bgcolor=”orange”>Budget Total&nbsp;</td>
<td bgcolor=”orange”>$</td>
<td bgcolor=”orange”>
<input id=”bTot” name=”bTot” type=”text” size=”12″ />
</td>
</tr>

</table>
</form>

<script type=”text/javascript”><!–
$(“#bCalc”).click(function(){
var c,s,o; // Current Account Balances
var e,d,oi; // Current Income
var B; // Budget Calculation
var exp1,exp2,exp3,exp4,exp5,exp6,exp7,exp8,exp9,exp10,exp11,exp12,exp13,exp14,exp15,exp16,exp17,exp18,exp19,exp20; // expenses

c = parseFloat($(“#cAct”).val());
s = parseFloat($(“#sAct”).val());
o = parseFloat($(“#oAct”).val());
e = parseFloat($(“#eInc”).val());
d = parseFloat($(“#dInc”).val());
oi = parseFloat($(“#oInc”).val());

exp1 = parseFloat($(“#exp1”).val());
exp2 = parseFloat($(“#exp2”).val());
exp3 = parseFloat($(“#exp3”).val());
exp4 = parseFloat($(“#exp4”).val());
exp5 = parseFloat($(“#exp5”).val());
exp6 = parseFloat($(“#exp6”).val());
exp7 = parseFloat($(“#exp7”).val());
exp8 = parseFloat($(“#exp8”).val());
exp9 = parseFloat($(“#exp9”).val());
exp10 = parseFloat($(“#exp10”).val());
exp11 = parseFloat($(“#exp11”).val());
exp12 = parseFloat($(“#exp12”).val());
exp13 = parseFloat($(“#exp13”).val());
exp14 = parseFloat($(“#exp14”).val());
exp15 = parseFloat($(“#exp15”).val());
exp16 = parseFloat($(“#exp16”).val());
exp17 = parseFloat($(“#exp17”).val());
exp18 = parseFloat($(“#exp18”).val());
exp19 = parseFloat($(“#exp19”).val());
exp20 = parseFloat($(“#exp20”).val());

// Budget Calculation
B = c + s + o + e + d + oi – exp1 – exp2 – exp3 – exp4 – exp5 – exp6 – exp7 – exp8 – exp9 – exp10 – exp11 – exp12 – exp13 – exp14 – exp15 – exp16 – exp17 – exp18 – exp19 – exp20;

if(!isNaN(B))
{
$(“#bTot”).val(B.toFixed(2));
}
else
{
$(“#bTot”).val(‘There was an error’);
}
return false;
});
// –></script>

</div>
<p>Copyright &copy; 2011 Michael A. Stratton. All rights reserved. If you use this calculator, please link to this website. </p>
</body>
</html>

0
  Related Posts