Mileage Rate Calculator
This calculator helps you determine the cost per mile for your vehicle based on various expenses. This is particularly useful for business owners, freelancers, or anyone looking to track and reimburse travel costs accurately.
How to Calculate Mileage Rate
I will create a mileage rate calculator that focuses on calculating the cost per mile for business or personal travel.
Here's the HTML code:
.calculator-container {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.calculator-container h2 {
text-align: center;
margin-bottom: 15px;
color: #333;
}
.calculator-container p {
text-align: center;
margin-bottom: 25px;
color: #555;
line-height: 1.5;
}
.input-section {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
.input-section label {
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.input-section input {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.input-section input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
button {
width: 100%;
padding: 12px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
.result-section {
margin-top: 25px;
padding: 15px;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 4px;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: #0056b3;
}
function calculateMileageRate() {
var gasCost = parseFloat(document.getElementById("gasCost").value);
var maintenanceCost = parseFloat(document.getElementById("maintenanceCost").value);
var insuranceCost = parseFloat(document.getElementById("insuranceCost").value);
var depreciationCost = parseFloat(document.getElementById("depreciationCost").value);
var otherCosts = parseFloat(document.getElementById("otherCosts").value);
var totalMiles = parseFloat(document.getElementById("totalMiles").value);
var totalCosts = 0;
var resultDiv = document.getElementById("result");
if (isNaN(gasCost) || gasCost < 0) gasCost = 0;
if (isNaN(maintenanceCost) || maintenanceCost < 0) maintenanceCost = 0;
if (isNaN(insuranceCost) || insuranceCost < 0) insuranceCost = 0;
if (isNaN(depreciationCost) || depreciationCost < 0) depreciationCost = 0;
if (isNaN(otherCosts) || otherCosts < 0) otherCosts = 0;
if (isNaN(totalMiles) || totalMiles <= 0) {
resultDiv.innerHTML = "Please enter a valid number of miles driven (greater than 0).";
return;
}
totalCosts = gasCost + maintenanceCost + insuranceCost + depreciationCost + otherCosts;
var mileageRate = totalCosts / totalMiles;
if (isNaN(mileageRate)) {
resultDiv.innerHTML = "Please ensure all input fields are valid numbers.";
} else {
resultDiv.innerHTML = "Your Mileage Rate: $" + mileageRate.toFixed(2) + " per mile";
}
}