A simple calculator to help decide whether it's more efficient to take the bus than drive. (for Dave Burdick, 2013)

gas-bus-checker.html

<script type="text/javascript" src="http://extras.denverpost.com/media/js/jquery-min.js"></script>

<style type="text/css">
#gasbusparent { 
    width:100%;
    text-align:center;
}
#gasbus {
    width:330px;
    border:1px #ebebeb solid;
    padding:10px;
    margin:0 auto;
    text-align:left;
}
#gasbus ul {
    padding:0 16px;
}
#gasbus ul li {
    list-style-type:none;
    text-indent:0;
    padding:0;
    margin:2px 0;
    display:block;
}
#gasbus h1 {
    color:#003459;
    text-align:center;
    width:100%;
    font-size:20px;
    line-height:20px;
    font-weight:bold;
    font-family:Helvetica,Arial,Tahoma,sans-serif;
    margin:5px 0 5px;
}
#gasbus h1 a:link, #gasbus h1 a:visited, #gasbus h1 a:hover {
    text-decoration:none;
    color:#003459;
    text-align:center;
    width:100%;
    font-size:20px;
    line-height:20px;
    font-weight:bold;
    font-family:Helvetica,Arial,Tahoma,sans-serif;
    margin:5px 0 5px;
}
#gasbus form input { 
    display:inline;
    position:relative;
    float:right;
    text-align:right;
    width:60px;
    height:18px;
    border:1px solid #d6d6d6;
}
#gasbus #theoutput {
    padding:0 16px;
}
#gasbus #theoutput span {
    display:inline;
    position:relative;
    float:right;
    text-align:right;
}
#gasbus p {
    margin:2px 0;
}
#gasbus p#savingsnumber {
   width:100%;
   text-align:center;
}
#gasbus p#resetgasbus {
   margin-top:10px;
   width:100%;
   text-align:center;
   display:block;
   font-size:12px;
   font-family:Helvetica,Arial,Tahoma,sans-serif;
}
#gasbus p#resetgasbus .resetleft {
    display:inline;
    float:left;
    margin-left:16px;
}
#gasbus p#resetgasbus .resetright {
    display:inline;
    float:right;
    margin-right:16px;
}
#gasbus #thewinner {
    width:100%;
    background:#eee;
    padding:8px 0;
    display:block;
    margin:10px 0 0;
}
#gasbus #thewinner h1, #gasbus #thewinner p {
    margin:4px 0;
    width:100%;
}
</style>

<div id="gasbusparent">
<div id="gasbus">
<h1><a href="http://blogs.denverpost.com/personalinterest/2013/03/15/car-vs-bus-calculator/">Car vs. Bus</a></h1>
<p style="text-align:center;">Could you save on commuting?</p>
<form id="calculator">
<ul>
<li>Your commute distance (miles): <input type="text" id="distance" name="distance" value="0" onblur="if (this.value == '') {this.value = '0';}" onfocus="if (this.value == '0') {this.value = '';}"></li>
<li>Your car's MPG (city): <input type="text" id="mpg" name="mpg" value="0" onblur="if (this.value == '') {this.value = '0';}" onfocus="if (this.value == '0') {this.value = '';}"></li>
<li>Cost of gas (per gallon): <input type="text" id="gascost" name="gascost" value="0" onblur="if (this.value == '') {this.value = '0';}" onfocus="if (this.value == '0') {this.value = '';}"></li>
<li>Monthly parking cost: <input type="text" id="parkcost" name="parkcost" value="0" onblur="if (this.value == '') {this.value = '0';}" onfocus="if (this.value == '0') {this.value = '';}"></li>
<li>Monthly bus usage cost: <input type="text" id="buscost" name="buscost" value="0" onblur="if (this.value == '') {this.value = '0';}" onfocus="if (this.value == '0') {this.value = '';}"></li>
</ul>
</form>

<div id="theoutput">
<p>Gasoline used per month: <span id="gallons">0 gal.</span></p>
<p>Monthly cost of gas: <span id="gasmonth">$0.00</span></p>
<p>Monthly cost of commuting: <span id="commutecost">$0.00</span></p>
</div>

<div style="padding:0 16px;">
<div id="thewinner">
    <h1 id="savingsmessage">No winner yet...</h1>
    <p id="savingsnumber">Enter some numbers to experiment.</p>
</div>
</div>
<p id="resetgasbus"><span class="resetleft"><a href="#" onclick="resetGasBus();">Reset</a></span><span class="resetright"><em><a href="http://blogs.denverpost.com/personalinterest/2013/03/15/car-vs-bus-calculator/">The Denver Post</a></em></span></p>
<div style="height:0;clear:both;"></div>

<!--
<table width="100%"><tr><td align="center" style="font-family:Arial; font-weight:bold; font-size:16px;">Price Trends for Denver</td></tr><tr><td align="center" id="gasbuddy_10702">
<script language="JavaScript" type="text/javascript" src="http://df.gasbuddy.com/feed.gdf?k=J0mCbXmTP6VF8QEtwUFVHA5aB%2bDiw%2b7ipCjsf157SQzT%2bfjhgMemzHzIQ31qWxEdiwbSQl9FZBgh6lZZpQc1r3AF%2b1BXdy1a&i=10702"></script>
</td></tr><tr><td align="center" style="font-family:Arial; font-weight:bold; font-size:10px;"><b><a href="http://www.DenverGasPrices.com" target="_blank">Denver&nbsp;Gas Prices</a>&nbsp;Provided by&nbsp;<a href="http://www.GasBuddy.com" target="_blank">GasBuddy.com</a></b></td></tr></table>
-->

</div></div>

<script type="text/javascript">
function isBusBetter(A,B,C,D,E) {
    var costmessage = '';
    var savingsnumber = 0;
    var shortmessage = '';
    var F = (parseFloat(A) * 2) / parseFloat(B); // gallons of gas needed
        //console.log(parseFloat(B));
    if (E =='') { E = 0; }
        console.log(typeof E);
    var G = parseFloat(C) * F * 21.66; // monthly cost of gas (average number of work days in a month is 21.66)
    var H = parseFloat(D) + G; // monthly cost of commute
    var J = F * 21.66;
    if(Math.abs(parseFloat(E) - H) == 0) {
        costmessage = "It's a wash!";
        savingsnumbers = 0;
        shortmessage = 'either way';
    } else if(parseFloat(E) > H) {
        costmessage = "Your car wins!";
        shortmessage = "in your car";
        savingsnumber = parseFloat(E) - H;
    } else if(H > parseFloat(E)) {
        costmessage = "Victory for the bus!";
        shortmessage = "on the bus";
        savingsnumber = H - parseFloat(E);
    }
    if(J > 0 && J < 10000) {
        $("span#gallons").html(J.toFixed(2)+' gal.');
    }
    if(G > 0 && G < 10000) {
        $("span#gasmonth").html('$'+G.toFixed(2));
    }
    if(H > 0 && H < 10000) {
        $("span#commutecost").html('$'+H.toFixed(2));
    }
    if(parseFloat(A) > 0 && parseFloat(B) > 0 && parseFloat(C) > 0) {
        $("h1#savingsmessage").html(costmessage);
        $("h1#savingsmessage").css("color","#DD3333");
        $("p#savingsnumber").html('You save $'+savingsnumber.toFixed(2)+' per month '+shortmessage+'.');
    }
}
$("input#distance").keyup(function(){
    var AA = $("input#distance").val();
    var BB = $("input#mpg").val();
    var CC = $("input#gascost").val();
    var DD = $("input#parkcost").val();
    var EE = $("input#buscost").val();
    setTimeout(function() { isBusBetter(AA,BB,CC,DD,EE);},300);
});
$("input#mpg").keyup(function(){
    var AA = $("input#distance").val();
    var BB = $("input#mpg").val();
    var CC = $("input#gascost").val();
    var DD = $("input#parkcost").val();
    var EE = $("input#buscost").val();
    setTimeout(function() { isBusBetter(AA,BB,CC,DD,EE);},300);
});
$("input#gascost").keyup(function(){
    var AA = $("input#distance").val();
    var BB = $("input#mpg").val();
    var CC = $("input#gascost").val();
    var DD = $("input#parkcost").val();
    var EE = $("input#buscost").val();
    setTimeout(function() { isBusBetter(AA,BB,CC,DD,EE);},300);
});
$("input#parkcost").keyup(function(){
    var AA = $("input#distance").val();
    var BB = $("input#mpg").val();
    var CC = $("input#gascost").val();
    var DD = $("input#parkcost").val();
    var EE = $("input#buscost").val();
    setTimeout(function() { isBusBetter(AA,BB,CC,DD,EE);},300);
});
$("input#buscost").keyup(function(){
    var AA = $("input#distance").val();
    var BB = $("input#mpg").val();
    var CC = $("input#gascost").val();
    var DD = $("input#parkcost").val();
    var EE = $("input#buscost").val();
    setTimeout(function() { isBusBetter(AA,BB,CC,DD,EE);},300);
});
function resetGasBus() {
    $("input#distance").val(0);
    $("input#mpg").val(0);
    $("input#gascost").val(0);
    $("input#parkcost").val(0);
    $("input#buscost").val(0);
    $("h1#savingsmessage").html('No winner yet...');
    $("h1#savingsmessage").css("color","#003459");
    $("span#gallons").html('0 gal.');
    $("span#gasmonth").html('$0.00');
    $("span#commutecost").html('$0.00');
    $("p#savingsnumber").html('Enter some numbers to experiment.');
    isBusBetter(AA,BB,CC,DD,EE);
}
</script>