harryfear/Fuel Usage and Trip Cost Calculator.html

## Fuel Usage and Trip Cost Calculator.html
<!DOCTYPE html>
<html>

<head>
    <title>Fuel Usage and Trip Cost Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="p-3">
    <h1 class="mb-3">Fuel Usage and Trip Cost Calculator</h1>

    <form id="calculatorForm">
        <div class="mb-3">
            <label for="mpg" class="form-label">Miles per Gallon</label>
            <input type="number" id="mpg" class="form-control">
        </div>
        <div class="mb-3">
            <label for="distance" class="form-label">Distance</label>
            <input type="number" id="distance" class="form-control">
        </div>
        <div class="mb-3">
            <label for="distanceUnit" class="form-label">Distance Unit</label>
            <select id="distanceUnit" class="form-select">
                <option value="km" selected>Kilometres</option>
                <option value="miles">Miles</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="fuelPrice" class="form-label">Price per Litre (optional)</label>
            <input type="number" id="fuelPrice" class="form-control">
        </div>
        <button type="button" onclick="calculate()" class="btn btn-primary mr-2">Calculate</button>
        <button type="button" onclick="resetValues()" class="btn btn-secondary">Reset</button>
    </form>

    <h2 id="output" class="mt-3"></h2>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
        // Load stored values from localStorage on page load
        window.onload = function() {
            document.getElementById('mpg').value = localStorage.getItem('mpg') || '';
            document.getElementById('distance').value = localStorage.getItem('distance') || '';
			document.getElementById('distanceUnit').value = localStorage.getItem('distanceUnit') || 'km';
            document.getElementById('fuelPrice').value = localStorage.getItem('fuelPrice') || '';
			//document.getElementById('distanceUnit').value = 'km';
        }

        document.getElementById('calculatorForm').onsubmit = function(e) {
            // Prevent form from refreshing the page
            e.preventDefault();
            calculate();
        }

        function resetValues() {
            // Clear form inputs
            document.getElementById('mpg').value = '';
            document.getElementById('distance').value = '';
            document.getElementById('fuelPrice').value = '';

            // Remove stored values from localStorage
            localStorage.removeItem('mpg');
            localStorage.removeItem('distance');
            localStorage.removeItem('fuelPrice');

            // Clear output
            document.getElementById('output').innerHTML = '';
        }

		function calculate() {
    		// Get input values from the user
    		const mpg = document.getElementById('mpg').value;
    		const distance = document.getElementById('distance').value;
    		const fuelPrice = document.getElementById('fuelPrice').value;
    		const distanceUnit = document.getElementById('distanceUnit').value;

    		// Store values in localStorage
    		localStorage.setItem('mpg', mpg);
    		localStorage.setItem('distance', distance);
			localStorage.setItem('distanceUnit', distanceUnit);
    		localStorage.setItem('fuelPrice', fuelPrice);

    		// Constants for unit conversion
    		const kmPerMile = 1.60934;
    		const litresPerGallon = 4.54609;

    		// Calculate fuel usage in litres
    		let distanceInMiles;
    		if (distanceUnit === 'km') {
        		distanceInMiles = distance / kmPerMile;
    		} else {
        		distanceInMiles = distance;
    		}
    		const fuelUsageInGallons = distanceInMiles / mpg;
    		const fuelUsageInLitres = fuelUsageInGallons * litresPerGallon;

    		let outputMessage = `Fuel usage: ${fuelUsageInLitres.toFixed(2)} litres.`;

    		// Calculate trip cost if price per litre is provided
    		if (fuelPrice) {
        		const tripCost = fuelUsageInLitres * fuelPrice;
        		outputMessage += ` Trip cost: &pound;${tripCost.toFixed(2)}.`;
    		}

    		// Output the results
    		document.getElementById('output').innerHTML = outputMessage;
		}

    </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Fuel Usage and Trip Cost Calculator</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	</head>

	<body class="p-3">
	<h1 class="mb-3">Fuel Usage and Trip Cost Calculator</h1>

	<form id="calculatorForm">
	<div class="mb-3">
	<label for="mpg" class="form-label">Miles per Gallon</label>
	<input type="number" id="mpg" class="form-control">
	</div>
	<div class="mb-3">
	<label for="distance" class="form-label">Distance</label>
	<input type="number" id="distance" class="form-control">
	</div>
	<div class="mb-3">
	<label for="distanceUnit" class="form-label">Distance Unit</label>
	<select id="distanceUnit" class="form-select">
	<option value="km" selected>Kilometres</option>
	<option value="miles">Miles</option>
	</select>
	</div>
	<div class="mb-3">
	<label for="fuelPrice" class="form-label">Price per Litre (optional)</label>
	<input type="number" id="fuelPrice" class="form-control">
	</div>
	<button type="button" onclick="calculate()" class="btn btn-primary mr-2">Calculate</button>
	<button type="button" onclick="resetValues()" class="btn btn-secondary">Reset</button>
	</form>

	<h2 id="output" class="mt-3"></h2>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

	<script>
	// Load stored values from localStorage on page load
	window.onload = function() {
	document.getElementById('mpg').value = localStorage.getItem('mpg') \|\| '';
	document.getElementById('distance').value = localStorage.getItem('distance') \|\| '';
	document.getElementById('distanceUnit').value = localStorage.getItem('distanceUnit') \|\| 'km';
	document.getElementById('fuelPrice').value = localStorage.getItem('fuelPrice') \|\| '';
	//document.getElementById('distanceUnit').value = 'km';
	}

	document.getElementById('calculatorForm').onsubmit = function(e) {
	// Prevent form from refreshing the page
	e.preventDefault();
	calculate();
	}

	function resetValues() {
	// Clear form inputs
	document.getElementById('mpg').value = '';
	document.getElementById('distance').value = '';
	document.getElementById('fuelPrice').value = '';

	// Remove stored values from localStorage
	localStorage.removeItem('mpg');
	localStorage.removeItem('distance');
	localStorage.removeItem('fuelPrice');

	// Clear output
	document.getElementById('output').innerHTML = '';
	}

	function calculate() {
	// Get input values from the user
	const mpg = document.getElementById('mpg').value;
	const distance = document.getElementById('distance').value;
	const fuelPrice = document.getElementById('fuelPrice').value;
	const distanceUnit = document.getElementById('distanceUnit').value;

	// Store values in localStorage
	localStorage.setItem('mpg', mpg);
	localStorage.setItem('distance', distance);
	localStorage.setItem('distanceUnit', distanceUnit);
	localStorage.setItem('fuelPrice', fuelPrice);

	// Constants for unit conversion
	const kmPerMile = 1.60934;
	const litresPerGallon = 4.54609;

	// Calculate fuel usage in litres
	let distanceInMiles;
	if (distanceUnit === 'km') {
	distanceInMiles = distance / kmPerMile;
	} else {
	distanceInMiles = distance;
	}
	const fuelUsageInGallons = distanceInMiles / mpg;
	const fuelUsageInLitres = fuelUsageInGallons * litresPerGallon;

	let outputMessage = `Fuel usage: ${fuelUsageInLitres.toFixed(2)} litres.`;

	// Calculate trip cost if price per litre is provided
	if (fuelPrice) {
	const tripCost = fuelUsageInLitres * fuelPrice;
	outputMessage += ` Trip cost: £${tripCost.toFixed(2)}.`;
	}

	// Output the results
	document.getElementById('output').innerHTML = outputMessage;
	}

	</script>

	</body>

	</html>