DOWNLOAD: MPG Fuel Savings Calculator
If you like this MPG Fuel Savings script, please feel free to use it on your website, and even modify the code to suit your needs. Our only request is that you link back to Raving Roo (http://ravingroo.com) from your website.
The MPG Fuel Savings script exists in three parts, (1) HTML code, (2) CSS code, (3) JavaScript code. Expand each of the sections below to copy the code.
Get the code:
<p><a title="Raving Roo" href="http://ravingroo.com">Script by Raving Roo:</a></p>
<div class="mfsc-upperdiv">
<p><b>INPUT</b></p>
<form name=mpgfuelsavingscalc method=POST>
<div class="mfsc-innerdiv">
<p>Gas Price<br>
<input type=text onkeypress="return validNumber(event)" name=gasPrice size=7></p>
<p class="mfsc-error" id="gasPriceError"></p>
</div>
<div class="mfsc-innerdiv">
<p>Miles Per Year<br>
<input type=text onkeypress="return validNumber(event)" name=miles size=7></p>
<p class="mfsc-error" id="milesError"></p>
</div>
<div class="mfsc-innerdiv">
<p>(A) Car MPG<br>
<input type=text onkeypress="return validNumber(event)" name=mpgCarA size=7></p>
<p class="mfsc-error" id="mpgCarAError"></p>
</div>
<div class="mfsc-innerdiv">
<p>(B) Car MPG<br>
<input type=text onkeypress="return validNumber(event)" name=mpgCarB size=7></p>
<p class="mfsc-error" id="mpgCarBError"></p>
</div>
<input type=button onClick="return fuelSavings()" value=Calculate> <input type=button onClick="return fuelSavingsReset()" value=Reset>
<br><small>* Numbers and decimal points only.</small>
<p class="mfsc-infoMessage" id="infoMessage"></p>
</form>
</div>
<div class="mfsc-middlediv">
<p><b>COSTS</b></p>
<div class="mfsc-innerdiv">
<p>(A) 25 Miles</p>
<p class="mfsc-costs" id="mile25CostCarA"></p><br>
</div>
<div class="mfsc-innerdiv">
<p>(B) 25 Miles</p>
<p class="mfsc-costs" id="mile25CostCarB"></p><br>
</div>
<div class="mfsc-innerdiv">
<p>(A) Monthly</p>
<p class="mfsc-costs" id="monthlyCostCarA"></p><br>
</div>
<div class="mfsc-innerdiv">
<p>(B) Monthly</p>
<p class="mfsc-costs" id="monthlyCostCarB"></p><br>
</div>
<div class="mfsc-innerdiv">
<p>(A) Annual</p>
<p class="mfsc-costs" id="annualCostCarA"></p><br>
</div>
<div class="mfsc-innerdiv">
<p>(B) Annual</p>
<p class="mfsc-costs" id="annualCostCarB"></p><br>
</div>
</div>
<div class="mfsc-lowerdiv">
<p><b>SAVINGS</b></p><br>
<p>Monthly</p>
<p class="mfsc-savings" id="monthlySavings"></p><br>
<p>Annual</p>
<p class="mfsc-savings" id="annualSavings"></p><br>
<p>After...</p>
<p class="mfsc-afteryear" id="yeartwoSavings"></p>
<p class="mfsc-afteryear" id="yearthreeSavings"></p>
<p class="mfsc-afteryear" id="yearfourSavings"></p>
<p class="mfsc-afteryear" id="yearfiveSavings"></p>
<p class="mfsc-afteryear" id="yeartenSavings"></p>
<p> </p>
</div>
<div class="mfsc-resetdiv">
<p> </p>
</div>
<p class="mfsc-pepTalk" id="pepTalk">It's pretty amazing how the savings start to add up after only a few years!</p><br>
/* START - MPG Fuel Savings Calculator */
.mfsc-upperdiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #fafafa;
width:240px;
height:340px;
line-height:20px;
border:1px solid #cccccc;
border-radius:10px;
margin:0 5px 5px 0;
padding:15px;
float:left;
}
.mfsc-middlediv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #eaeaea;
width:240px;
height:340px;
line-height:20px;
margin:0 5px 5px 0;
border:1px solid #aaaaaa;
border-radius:10px;
padding:15px;
float:left;
}
.mfsc-lowerdiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #dadada;
width:240px;
height:340px;
line-height:20px;
border:1px solid #888888;
border-radius:10px;
margin:0 5px 5px 0;
padding:15px;
float:left;
}
.mfsc-lowerdiv p {
margin:2px 0 0px 0;
}
.mfsc-innerdiv {
width:50%;
float:left;
}
.mfsc-innerdiv p {
margin:2px 0 5px 0;
}
.mfsc-resetdiv {
clear:both;
}
.mfsc-costs {
height:23px;
width:100px;
background-color: #ffffff;
border:1px solid #bbbbbb;
border-radius: 3px;
padding-left:10px;
}
.mfsc-savings {
height:23px;
width:140px;
background-color: #ffffff;
border:1px solid #aaaaaa;
border-radius: 3px;
padding-left:10px;
}
.mfsc-afteryear {
height:20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.mfsc-error {
height:20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#ca0000;
line-height:20px;
}
.mfsc-infoMessage {
height:20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#ca0000;
line-height:20px;
}
.mfsc-pepTalk {
display:none;
}
/* END - MPG Fuel Savings Calculator */
/*!
* Raving Roo - MPG Fuel Savings Calculator (MFSC) v1.0
* Copyright 2014 by David K. Sutton
*
* You are free to use this script on your website.
* While not required, it would be much appreciated if you could link back to http://ravingroo.com
*/
function validNumber(fieldinput){
var unicode=fieldinput.charCode? fieldinput.charCode : fieldinput.keyCode;
if ((unicode!=8) && (unicode!=46)) { //if the key isn't the backspace key (which we should allow)
if (unicode<48||unicode>57) //if not a number
return false; //disable key press
}
}
function fuelSavings()
{
// Reset error messages to blank
document.getElementById('infoMessage').innerHTML = '';
document.getElementById('gasPriceError').innerHTML = '';
document.getElementById('milesError').innerHTML = '';
document.getElementById('mpgCarAError').innerHTML = '';
document.getElementById('mpgCarBError').innerHTML = '';
// Form validation checking
if ((document.mpgfuelsavingscalc.gasPrice.value === null) || (document.mpgfuelsavingscalc.gasPrice.value.length === 0) || (isNaN(document.mpgfuelsavingscalc.gasPrice.value) === true))
{
document.getElementById('infoMessage').innerHTML = 'Please enter the missing information.';
document.getElementById('gasPriceError').innerHTML = '* Example: 3.50';
} else if ((document.mpgfuelsavingscalc.miles.value === null) || (document.mpgfuelsavingscalc.miles.value.length === 0) || (isNaN(document.mpgfuelsavingscalc.miles.value) === true))
{
document.getElementById('infoMessage').innerHTML = 'Please enter the missing information.';
document.getElementById('milesError').innerHTML = '* Example: 15000';
} else if ((document.mpgfuelsavingscalc.mpgCarA.value === null) || (document.mpgfuelsavingscalc.mpgCarA.value.length === 0) || (isNaN(document.mpgfuelsavingscalc.mpgCarA.value) === true))
{
document.getElementById('infoMessage').innerHTML = 'Please enter the missing information.';
document.getElementById('mpgCarAError').innerHTML = '* Example: 20';
} else if ((document.mpgfuelsavingscalc.mpgCarB.value === null) || (document.mpgfuelsavingscalc.mpgCarB.value.length === 0) || (isNaN(document.mpgfuelsavingscalc.mpgCarB.value) === true))
{
document.getElementById('infoMessage').innerHTML = 'Please enter the missing information.';
document.getElementById('mpgCarBError').innerHTML = '* Example: 30';
} else
{
// Set variables from form data
var costperGallon = document.mpgfuelsavingscalc.gasPrice.value;
var milesperyear = document.mpgfuelsavingscalc.miles.value;
var carA = document.mpgfuelsavingscalc.mpgCarA.value;
var carB = document.mpgfuelsavingscalc.mpgCarB.value;
// Perform calculations, set additional variables
var calcannualCostCarA = (costperGallon/carA)*milesperyear;
var calcannualCostCarB = (costperGallon/carB)*milesperyear;
var mile25CarA = (costperGallon/carA) * 25;
var mile25CarB = (costperGallon/carB) * 25;
if (calcannualCostCarA > calcannualCostCarB) {
var calcannualSavings = calcannualCostCarA - calcannualCostCarB;
} else
{ var calcannualSavings = calcannualCostCarB - calcannualCostCarA;
}
// display annual costs, monthly costs, annual savings, and monhtly savings
document.getElementById('mile25CostCarA').innerHTML = '$' + mile25CarA.toFixed(2);
document.getElementById('mile25CostCarB').innerHTML = '$' + mile25CarB.toFixed(2);
document.getElementById('monthlyCostCarA').innerHTML = '$' + (calcannualCostCarA / 12).toFixed(2);
document.getElementById('monthlyCostCarB').innerHTML = '$' + (calcannualCostCarB / 12).toFixed(2);
document.getElementById('annualCostCarA').innerHTML = '$' + calcannualCostCarA.toFixed(2);
document.getElementById('annualCostCarB').innerHTML = '$' + calcannualCostCarB.toFixed(2);
document.getElementById('monthlySavings').innerHTML = '$' + (calcannualSavings / 12).toFixed(2);
document.getElementById('annualSavings').innerHTML = '$' + calcannualSavings.toFixed(2);
document.getElementById('yeartwoSavings').innerHTML = 'Year 2 - $' + (calcannualSavings * 2).toFixed(2);
document.getElementById('yearthreeSavings').innerHTML = 'Year 3 - $' + (calcannualSavings * 3).toFixed(2);
document.getElementById('yearfourSavings').innerHTML = 'Year 4 - $' + (calcannualSavings * 4).toFixed(2);
document.getElementById('yearfiveSavings').innerHTML = 'Year 5 - $' + (calcannualSavings * 5).toFixed(2);
document.getElementById('yeartenSavings').innerHTML = 'Year 10 - $' + (calcannualSavings * 10).toFixed(2);
document.getElementById("pepTalk").style.display = "block";
}
}
function fuelSavingsReset()
{
// Reset everything to default/null/blank
document.getElementById('infoMessage').innerHTML = 'Values reset';
document.getElementById("pepTalk").style.display = "none";
document.getElementById('gasPriceError').innerHTML = '';
document.getElementById('milesError').innerHTML = '';
document.getElementById('mpgCarAError').innerHTML = '';
document.getElementById('mpgCarBError').innerHTML = '';
document.getElementById('mile25CostCarA').innerHTML = '';
document.getElementById('mile25CostCarB').innerHTML = '';
document.getElementById('monthlyCostCarA').innerHTML = '';
document.getElementById('monthlyCostCarB').innerHTML = '';
document.getElementById('annualCostCarA').innerHTML = '';
document.getElementById('annualCostCarB').innerHTML = '';
document.getElementById('monthlySavings').innerHTML = '';
document.getElementById('annualSavings').innerHTML = '';
document.getElementById('yeartwoSavings').innerHTML = '';
document.getElementById('yearthreeSavings').innerHTML = '';
document.getElementById('yearfourSavings').innerHTML = '';
document.getElementById('yearfiveSavings').innerHTML = '';
document.getElementById('yeartenSavings').innerHTML = '';
document.mpgfuelsavingscalc.gasPrice.value = null;
document.mpgfuelsavingscalc.miles.value = null;
document.mpgfuelsavingscalc.mpgCarA.value = null;
document.mpgfuelsavingscalc.mpgCarB.value = null;
}