function calculateFlowRate() {
var volumeInput = document.getElementById("volume");
var timeInput = document.getElementById("time");
var flowRateResultElement = document.getElementById("flowRateResult");
var flowRateUnitsElement = document.getElementById("flowRateUnits");
var volume = parseFloat(volumeInput.value);
var time = parseFloat(timeInput.value);
if (isNaN(volume) || isNaN(time)) {
flowRateResultElement.textContent = "Please enter valid numbers for volume and time.";
flowRateUnitsElement.textContent = "";
return;
}
if (time <= 0) {
flowRateResultElement.textContent = "Time taken must be greater than zero.";
flowRateUnitsElement.textContent = "";
return;
}
var flowRate = volume / time;
flowRateResultElement.textContent = "Estimated Flow Rate: " + flowRate.toFixed(2);
// Attempt to infer units, though user input might be inconsistent.
// A more robust system might ask for unit type.
var volumeString = volumeInput.value.trim();
var timeString = timeInput.value.trim();
var volumeUnits = "";
var timeUnits = "";
if (volumeString.includes("units")) {
volumeUnits = "units";
} else if (volumeString.includes("liters")) {
volumeUnits = "liters";
} else if (volumeString.includes("gallons")) {
volumeUnits = "gallons";
}
if (timeString.includes("minutes")) {
timeUnits = "minute";
} else if (timeString.includes("hours")) {
timeUnits = "hour";
} else if (timeString.includes("seconds")) {
timeUnits = "second";
}
if (volumeUnits && timeUnits) {
flowRateUnitsElement.textContent = "Units: " + volumeUnits + " per " + timeUnits;
} else {
flowRateUnitsElement.textContent = "Units: (Please ensure units are specified in input for clearer results)";
}
}
.calculator-wrapper {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.calculator-inputs h2 {
margin-top: 0;
color: #333;
}
.calculator-inputs p {
color: #555;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.form-group input[type="number"] {
width: calc(100% – 12px);
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.calculator-inputs button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.calculator-inputs button:hover {
background-color: #45a049;
}
.calculator-result {
margin-top: 25px;
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 4px;
}
.calculator-result h3 {
margin-top: 0;
color: #333;
}
.calculator-result p {
margin-bottom: 5px;
color: #666;
}
#flowRateResult {
font-weight: bold;
font-size: 1.1em;
color: #007bff;
}
#flowRateUnits {
font-style: italic;
color: #888;
}