pschichtel · March 17, 2017 18:25
diff --git a/calculate_cost.html b/calculate_cost.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Commute Cost Calculator</title>
        <meta charset="UTF-8">
        <style>
            html, body {
                padding: 0;
                margin: 0;
                font-family: Verdana, Arial, sans-serif;
            }

            body > div {
                width: 40%;
                min-width: 400px;
                max-width: 600px;
                margin: 40px auto;
            }

            body > div > div {
                margin: 5px 0;
            }

            body > div > div:last-child {
                margin-top: 15px;
                border-top: 1px solid black;
                padding-top: 15px;
            }
            input {
                float: right;
                border: 0;
            }
            input:not([type=checkbox]):not(.result) {
                width: 60px;
                background-color: #CCF;
                text-align: right;
            }
            input.result {
                width: 160px;
                background-color: #DFD;
            }
            body > div div {
                clear: right;
            }
        </style>
        <style media="print">
            input[type=number] {
                -moz-appearance: textfield;
            }

            input[type=number]::-webkit-inner-spin-button, input[type=number]::webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <div title="Use an estimate average depending on the planned driving style (fast vs efficient)">
                <label for="fuel_consumption">Volume of consumed fuel per distance</label>
                <input id="fuel_consumption" type="number" value="5" min="0" step="any">
            </div>
            <div title="Example: 1 Liter per Kilometer would be 1/100 = 0.01">
                <label for="fuel_consumption_factor">Consumption factor</label>
                <input id="fuel_consumption_factor" type="number" value="0.01" min="0" step="any">
            </div>
            <div title="The distance from your origin to your destination, not including the way back">
                <label for="distance_per_way">Distance per way</label>
                <input id="distance_per_way" type="number" value="100" min="0" step="any">
            </div>
            <div title="The number of commutes planned">
                <label for="number_of_commutes">Number of commutes</label>
                <input id="number_of_commutes" type="number" value="1" min="1" step="1">
            </div>
            <div title="Check this to if 1 commute consists of both the way to the destination and the way back">
                <label for="commute_includes_back">Commute includes way back</label>
                <input id="commute_includes_back" type="checkbox" checked>
            </div>
            <div title="This cost is added to every distance unit (e.g. 1 Kilometer) for for things like tire usage">
                <label for="fixed_cost_per_distance">Fixed cost per distance unit</label>
                <input id="fixed_cost_per_distance" type="number" value="0" min="0" step="any">
            </div>
            <div title="Estimate the expected average fuel price for the time frame of the commutes">
                <label for="fuel_price">Fuel price per volume unit</label>
                <input id="fuel_price" type="number" value="1.35" min="0" step="any">
            </div>
            <div>
                <div>
                    <label for="cost_per_unit">Cost per distance unit</label>
                    <input id="cost_per_unit" class="result" type="text" disabled>
                </div>
                <div>
                    <label for="cost_per_commute">Cost per commute</label>
                    <input id="cost_per_commute" class="result" type="text" disabled>
                </div>
                <div>
                    <label for="overall_cost">Cost for entire commute</label>
                    <input id="overall_cost" class="result" type="text" disabled>
                </div>
                <div>
                    <label for="consumed_fuel">Overall consumed fuel</label>
                    <input id="consumed_fuel" class="result" type="text" disabled>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
        <script>

            function update() {
            
                let fuelConsumption = parseFloat($('#fuel_consumption').val());
                let fuelConsumptionFactor = parseFloat($('#fuel_consumption_factor').val());
                let distancePerWay = parseFloat($('#distance_per_way').val());
                let numberOfCommutes = parseFloat($('#number_of_commutes').val());
                let commuteIncludesBack = $('#commute_includes_back').is(':checked')
                let fixedCostPerDistance = parseFloat($('#fixed_cost_per_distance').val());
                let fuelPrice = parseFloat($('#fuel_price').val());
                
                let costPerUnitOutlet = $('#cost_per_unit');
                let costPerCommuteOutlet = $('#cost_per_commute');
                let overallCostOutlet = $('#overall_cost');
                let consumedFuelOutlet = $('#consumed_fuel');

                let waysPerCommute = (commuteIncludesBack ? 2 : 1);
                let numberOfWays = numberOfCommutes * waysPerCommute;
                let overallDistance = distancePerWay * numberOfWays;
                let consumedFuelPerDistanceUnit = fuelConsumptionFactor * fuelConsumption;
                let calculatedCostPerUnit = fixedCostPerDistance + fuelPrice * consumedFuelPerDistanceUnit;
                let calculatedOverallCost = calculatedCostPerUnit * overallDistance;
                let calculatedConsumedFuel = overallDistance * consumedFuelPerDistanceUnit;
                let calculatedCostPerCommute = waysPerCommute * distancePerWay * calculatedCostPerUnit;

                costPerUnitOutlet.val(calculatedCostPerUnit);
                costPerCommuteOutlet.val(calculatedCostPerCommute);
                overallCostOutlet.val(calculatedOverallCost);
                consumedFuelOutlet.val(calculatedConsumedFuel);

            }
        
            $('input:not([disabled])').on('change', () => {
                update();
            });

            update();
        
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Commute Cost Calculator</title>
	<meta charset="UTF-8">
	<style>
	html, body {
	padding: 0;
	margin: 0;
	font-family: Verdana, Arial, sans-serif;
	}

	body > div {
	width: 40%;
	min-width: 400px;
	max-width: 600px;
	margin: 40px auto;
	}

	body > div > div {
	margin: 5px 0;
	}

	body > div > div:last-child {
	margin-top: 15px;
	border-top: 1px solid black;
	padding-top: 15px;
	}
	input {
	float: right;
	border: 0;
	}
	input:not([type=checkbox]):not(.result) {
	width: 60px;
	background-color: #CCF;
	text-align: right;
	}
	input.result {
	width: 160px;
	background-color: #DFD;
	}
	body > div div {
	clear: right;
	}
	</style>
	<style media="print">
	input[type=number] {
	-moz-appearance: textfield;
	}

	input[type=number]::-webkit-inner-spin-button, input[type=number]::webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<div>
	<div title="Use an estimate average depending on the planned driving style (fast vs efficient)">
	<label for="fuel_consumption">Volume of consumed fuel per distance</label>
	<input id="fuel_consumption" type="number" value="5" min="0" step="any">
	</div>
	<div title="Example: 1 Liter per Kilometer would be 1/100 = 0.01">
	<label for="fuel_consumption_factor">Consumption factor</label>
	<input id="fuel_consumption_factor" type="number" value="0.01" min="0" step="any">
	</div>
	<div title="The distance from your origin to your destination, not including the way back">
	<label for="distance_per_way">Distance per way</label>
	<input id="distance_per_way" type="number" value="100" min="0" step="any">
	</div>
	<div title="The number of commutes planned">
	<label for="number_of_commutes">Number of commutes</label>
	<input id="number_of_commutes" type="number" value="1" min="1" step="1">
	</div>
	<div title="Check this to if 1 commute consists of both the way to the destination and the way back">
	<label for="commute_includes_back">Commute includes way back</label>
	<input id="commute_includes_back" type="checkbox" checked>
	</div>
	<div title="This cost is added to every distance unit (e.g. 1 Kilometer) for for things like tire usage">
	<label for="fixed_cost_per_distance">Fixed cost per distance unit</label>
	<input id="fixed_cost_per_distance" type="number" value="0" min="0" step="any">
	</div>
	<div title="Estimate the expected average fuel price for the time frame of the commutes">
	<label for="fuel_price">Fuel price per volume unit</label>
	<input id="fuel_price" type="number" value="1.35" min="0" step="any">
	</div>
	<div>
	<div>
	<label for="cost_per_unit">Cost per distance unit</label>
	<input id="cost_per_unit" class="result" type="text" disabled>
	</div>
	<div>
	<label for="cost_per_commute">Cost per commute</label>
	<input id="cost_per_commute" class="result" type="text" disabled>
	</div>
	<div>
	<label for="overall_cost">Cost for entire commute</label>
	<input id="overall_cost" class="result" type="text" disabled>
	</div>
	<div>
	<label for="consumed_fuel">Overall consumed fuel</label>
	<input id="consumed_fuel" class="result" type="text" disabled>
	</div>
	</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
	<script>

	function update() {

	let fuelConsumption = parseFloat($('#fuel_consumption').val());
	let fuelConsumptionFactor = parseFloat($('#fuel_consumption_factor').val());
	let distancePerWay = parseFloat($('#distance_per_way').val());
	let numberOfCommutes = parseFloat($('#number_of_commutes').val());
	let commuteIncludesBack = $('#commute_includes_back').is(':checked')
	let fixedCostPerDistance = parseFloat($('#fixed_cost_per_distance').val());
	let fuelPrice = parseFloat($('#fuel_price').val());

	let costPerUnitOutlet = $('#cost_per_unit');
	let costPerCommuteOutlet = $('#cost_per_commute');
	let overallCostOutlet = $('#overall_cost');
	let consumedFuelOutlet = $('#consumed_fuel');

	let waysPerCommute = (commuteIncludesBack ? 2 : 1);
	let numberOfWays = numberOfCommutes * waysPerCommute;
	let overallDistance = distancePerWay * numberOfWays;
	let consumedFuelPerDistanceUnit = fuelConsumptionFactor * fuelConsumption;
	let calculatedCostPerUnit = fixedCostPerDistance + fuelPrice * consumedFuelPerDistanceUnit;
	let calculatedOverallCost = calculatedCostPerUnit * overallDistance;
	let calculatedConsumedFuel = overallDistance * consumedFuelPerDistanceUnit;
	let calculatedCostPerCommute = waysPerCommute * distancePerWay * calculatedCostPerUnit;

	costPerUnitOutlet.val(calculatedCostPerUnit);
	costPerCommuteOutlet.val(calculatedCostPerCommute);
	overallCostOutlet.val(calculatedOverallCost);
	consumedFuelOutlet.val(calculatedConsumedFuel);

	}

	$('input:not([disabled])').on('change', () => {
	update();
	});

	update();

	</script>
	</body>
	</html>