Skip to content

Instantly share code, notes, and snippets.

@douglasgoodwin

douglasgoodwin/index.html

Last active August 29, 2015 14:15
Show Gist options
  • Save douglasgoodwin/d3460ddec0c5f46b29df to your computer and use it in GitHub Desktop.
Save douglasgoodwin/d3460ddec0c5f46b29df to your computer and use it in GitHub Desktop.
Download ZIP
commute cost calculator
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en-US">
<!--<![endif]-->
<head>
<title>Commute Cost Calculator</title>
<link rel="stylesheet" type="text/css" href="http://media.metro.net/static/shinyAndNew/styles/main.css?v=1.3">
<script type="text/javascript" src="//use.typekit.net/his3nwi.js"></script>
<script type="text/javascript">
try {
Typekit.load();
} catch (e) {}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<style>
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-slider-horizontal {
height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.default {
font-size: 20px;
padding-bottom: 5px;
}
/* Component containers
----------------------------------*/
.ui-widget-content {
background: #ffffff;
color: #222222/*{fcContent}*/
;
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3/*{borderColorDefault}*/
;
background: #000/*{bgColorDefault}*/
/*{bgImgUrlDefault}*/
50%/*{bgDefaultXPos}*/
50%/*{bgDefaultYPos}*/
repeat-x/*{bgDefaultRepeat}*/
;
font-weight: normal/*{fwDefault}*/
;
color: #555555/*{fcDefault}*/
;
}
/* Icons
----------------------------------*/
/* Overlays */
.slider-group {
background: #CCC;
border: 1px solid #999;
margin-bottom: 10px;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.slider-group:before,
.slider-group:after {
content: "";
display: table;
}
.slider-group:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.slider-group {
zoom: 1;
}
.slider-group h3 {
float: left;
margin-bottom: 10px;
}
.slider-group select,
.slider-group .default {
float: right;
}
.slider-group .slider {
clear: both;
}
.slider-group .footnote {
margin-top: 15px;
font-size: 9px;
}
.total {
clear: both;
}
.total:after {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.total h3 {
float: left;
margin-bottom: .5em;
width: 280px;
}
.total .default {
float: right;
}
.iframebg {
background-color: #ffffff;
}
.iframeh1 {
font-family: "ff-scala-sans-web-n4", "ff-scala-sans-web", Arial, Helvetica, sans-serif;
}
.iframeh2 {
font-size: 25px;
font-weight: 700;
line-height: 23px;
border-bottom: 2px solid #000;
padding: 20px 0 3px 0;
margin-top: 20px;
font-family: "ff-scala-sans-web-n4", "ff-scala-sans-web", Arial, Helvetica, sans-serif;
display: block;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
</style>
<script>
$(function() {
$('.slider-group .slider').each(function(i) {
var rel = $(this).attr('rel');
var params = rel.split('|');
var deflt = parseInt($(this).prev('.default').find('.amount').html());
$(this).slider({
value: deflt,
min: parseInt(params[0]),
max: parseInt(params[1]),
step: parseFloat(params[2]),
slide: function(event, ui) {
$(this).prev('.default').find('.amount').html(ui.value);
calculate();
}
});
});
$('#car-size-select').change(function() {
data.size = parseFloat($('#car-size-select').val());
calculate();
});
data.size = parseFloat($('#car-size-select').val());
calculate();
});
var data = {};
function calculateCosts() {
data.parking = parseInt($('#parking .default .amount').html());
data.tolls = parseInt($('#tolls .default .amount').html());
data.insurance = parseInt($('#insurance .default .amount').html());
data.finance = parseInt($('#finance .default .amount').html());
data.registration = parseInt($('#registration .default .amount').html());
data.roundtrip = parseInt($('#round-trip .default .amount').html());
data.workdays = parseInt($('#work-days .default .amount').html());
data.economy = parseInt($('#economy .default .amount').html());
data.gas = parseFloat($('#gas-price .default .amount').html());
$('#gas-price .default .amount').html(data.gas.toFixed(2));
data.totalFees = data.roundtrip * data.workdays;
data.totalMiles = data.roundtrip * data.workdays;
data.totalGallons = data.totalMiles / data.economy;
data.totalGas = data.totalGallons * data.gas;
data.totalMaintenance = data.totalMiles * data.size;
}
function calculate() {
calculateCosts();
$('#total-miles .default .amount').html(data.totalMiles);
$('#total-gallons .default .amount').html(data.totalGallons.toFixed(1));
$('#total-gas .default .amount').html(data.totalGas.toFixed(2));
$('#total-maintenance .default .amount').html(data.totalMaintenance.toFixed(2));
var perMonth = data.parking +data.tolls +data.totalGas +data.totalMaintenance +data.insurance +data.finance +(data.registration/12);
var perDay = perMonth / data.workdays;
var perYear = (perMonth * 12) ;
$('#per-day-total .default .amount').html(perDay.toFixed(2));
$('#per-month-total .default .amount').html(perMonth.toFixed(2));
$('#per-year-total .default .amount').html(perYear.toFixed(2));
}
</script>
</head>
<body class="iframebg">
<div id="calculator">
<div id="costs" class="section">
<div id="car-size" class="slider-group">
<h1><span class="iframeh1"><span class="iframeh1">Car Size</span></h1>
<select id="car-size-select">
<option value="0.0486">Small Sedan</option>
<option value="0.0545">Medium Sedan</option>
<option value="0.0609">Large Sedan</option>
<option value="0.0615">SUV</option>
<option value="0.0520">Minivan</option>
</select>
</div>
<div id="parking" class="slider-group">
<h1><span class="iframeh1">Monthly Parking Fees</span></h1>
<div class="default">$<span class="amount">65</span></div>
<div class="slider" rel="0|500|5"></div>
</div>
<div id="tolls" class="slider-group">
<h1><span class="iframeh1">Monthly Toll Fees</span></h1>
<div class="default">$<span class="amount">0</span></div>
<div class="slider" rel="0|500|5"></div>
</div>
<div id="round-trip" class="slider-group">
<h1><span class="iframeh1">Daily Round Trip Commute</span></h1>
<div class="default"><span class="amount">20</span> miles</div>
<div class="slider" rel="1|500|1"></div>
</div>
<div id="work-days" class="slider-group">
<h1><span class="iframeh1">Work days in Month (average is 22)</span></h1>
<div class="default"><span class="amount">22</span></div>
<div class="slider" rel="0|31|1"></div>
</div>
<div id="economy" class="slider-group">
<h1><span class="iframeh1">Vehicle Fuel Economy (average between 17-23mpg)</span></h1>
<div class="default"><span class="amount">20</span> mpg</div>
<div class="slider" rel="1|100|1"></div>
</div>
<div id="gas-price" class="slider-group">
<h1><span class="iframeh1">Cost of Gas per Gallon</span></h1>
<div class="default">$<span class="amount">3.80</span></div>
<div class="slider" rel="0|8|.05"></div>
</div>
<div id="insurance" class="slider-group">
<h1><span class="iframeh1">Monthly Car Insurance Premium</span></h1>
<div class="default">$<span class="amount">135</span></div>
<div class="slider" rel="0|300|1"></div>
</div>
<div id="finance" class="slider-group">
<h1><span class="iframeh1">Monthly Car Finance Charge</span></h1>
<div class="default">$<span class="amount">389</span></div>
<div class="slider" rel="0|700|1"></div>
</div>
<div id="registration" class="slider-group">
<h1><span class="iframeh1">Annual Registration Fee</span></h1>
<div class="default">$<span class="amount">100</span></div>
<div class="slider" rel="0|250|1"></div>
</div>
</div>
</div>
<div class="section">
<h2><span class="iframeh2">Total Costs</span></h2>
<div id="total-miles" class="total">
<h1><span class="iframeh1">Monthly Commute Miles Driven</span></h1>
<div class="default"><span class="amount"></span></div>
</div>
<div id="total-gallons" class="total">
<h1><span class="iframeh1">Monthly Gallons Consumed for Commute</span></h1>
<div class="default"><span class="amount"></span></div>
</div>
<div id="total-gas" class="total">
<h1><span class="iframeh1">Monthly Cost of Gas for Commute</span></h1>
<div class="default">$<span class="amount"></span></div>
</div>
<div id="total-maintenance" class="total">
<h1><span class="iframeh1">Monthly Maintenance and Tire Cost for Commute*</span></h1>
<div class="default">$<span class="amount"></span></div>
</div>
<hr />
<div id="per-day-total" class="total">
<h1><span class="iframeh1">Total Daily Commuting Cost</span></h1>
<div class="default">$<span class="amount"></span></div>
</div>
<div id="per-month-total" class="total">
<h1><span class="iframeh1">Total Monthly Commuting Costs</span></h1>
<div class="default">$<span class="amount"></span></div>
</div>
<div id="per-year-total" class="total">
<h1><span class="iframeh1">Total Yearly Commuting Cost</span></h1>
<div class="default">$<span class="amount"></span></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment