.sfrc-calculator-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
border: 1px solid #e0e0e0;
}
.sfrc-header {
background: #0077be;
color: white;
padding: 24px;
text-align: center;
}
.sfrc-header h2 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.sfrc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 24px;
}
@media (max-width: 600px) {
.sfrc-grid {
grid-template-columns: 1fr;
}
}
.sfrc-input-group {
margin-bottom: 15px;
}
.sfrc-input-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
font-size: 14px;
}
.sfrc-input-group input, .sfrc-input-group select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s;
}
.sfrc-input-group input:focus {
border-color: #0077be;
outline: none;
}
.sfrc-section-title {
grid-column: 1 / -1;
font-size: 18px;
color: #0077be;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.sfrc-btn-container {
grid-column: 1 / -1;
text-align: center;
margin-top: 10px;
}
.sfrc-btn {
background: #0077be;
color: white;
border: none;
padding: 14px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 30px;
cursor: pointer;
transition: background 0.2s;
}
.sfrc-btn:hover {
background: #005f99;
}
.sfrc-results {
background: #f8fbff;
border-top: 1px solid #e0e0e0;
padding: 24px;
display: none;
}
.sfrc-result-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
text-align: center;
}
@media (max-width: 600px) {
.sfrc-result-grid {
grid-template-columns: 1fr;
}
}
.sfrc-result-item {
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.sfrc-result-label {
font-size: 13px;
color: #666;
margin-bottom: 5px;
}
.sfrc-result-value {
font-size: 20px;
font-weight: 700;
color: #333;
}
.sfrc-result-value.highlight {
color: #0077be;
}
.sfrc-status-bar {
grid-column: 1 / -1;
padding: 15px;
margin-top: 20px;
border-radius: 6px;
text-align: center;
font-weight: 600;
}
.status-efficient { background: #d4edda; color: #155724; }
.status-standard { background: #fff3cd; color: #856404; }
.status-wasteful { background: #f8d7da; color: #721c24; }
.sfrc-content {
padding: 24px;
color: #444;
line-height: 1.6;
border-top: 1px solid #eee;
}
.sfrc-content h3 {
color: #333;
margin-top: 24px;
}
.sfrc-content ul {
padding-left: 20px;
}
.sfrc-content li {
margin-bottom: 8px;
}
function calculateFlowRate() {
// Get Input Values
var unit = document.getElementById('sfrc_unit').value;
var volume = parseFloat(document.getElementById('sfrc_volume').value);
var seconds = parseFloat(document.getElementById('sfrc_seconds').value);
var duration = parseFloat(document.getElementById('sfrc_duration').value);
var showersPerDay = parseFloat(document.getElementById('sfrc_showers_day').value);
var costPer1k = parseFloat(document.getElementById('sfrc_cost').value);
// Validation
if (isNaN(volume) || volume <= 0 || isNaN(seconds) || seconds <= 0) {
alert("Please enter a valid container volume and time in seconds.");
return;
}
if (isNaN(duration)) duration = 0;
if (isNaN(showersPerDay)) showersPerDay = 0;
if (isNaN(costPer1k)) costPer1k = 0;
// 1. Calculate Flow Rate (GPM or LPM)
// Formula: Volume / (Seconds / 60)
var minutesToFill = seconds / 60;
var flowRate = volume / minutesToFill;
// 2. Calculate Usage Stats
var waterPerShower = flowRate * duration;
var dailyUsage = waterPerShower * showersPerDay;
var annualUsage = dailyUsage * 365;
// 3. Calculate Cost
// Cost is per 1000 units
var annualCost = (annualUsage / 1000) * costPer1k;
// 4. Determine Efficiency Rating
var ratingText = "";
var ratingClass = "";
var unitLabel = (unit === 'gallons') ? 'GPM' : 'LPM';
// Thresholds roughly aligned: 2.5 GPM ≈ 9.5 LPM
var thresholdEfficient = (unit === 'gallons') ? 2.0 : 7.6;
var thresholdStandard = (unit === 'gallons') ? 2.5 : 9.5;
if (flowRate <= thresholdEfficient) {
ratingText = "Excellent (Eco-Friendly)";
ratingClass = "status-efficient";
document.getElementById('sfrc_status_bar').innerHTML = "Your shower is highly efficient!";
} else if (flowRate <= thresholdStandard) {
ratingText = "Standard";
ratingClass = "status-standard";
document.getElementById('sfrc_status_bar').innerHTML = "Your shower meets standard regulations.";
} else {
ratingText = "Inefficient";
ratingClass = "status-wasteful";
document.getElementById('sfrc_status_bar').innerHTML = "Warning: High flow rate detected. Consider upgrading.";
}
// 5. Update UI
document.getElementById('res_rate').innerHTML = flowRate.toFixed(2) + " " + unitLabel + "";
document.getElementById('res_per_shower').innerText = waterPerShower.toFixed(1) + " " + (unit === 'gallons' ? 'Gal' : 'L');
document.getElementById('res_daily').innerText = dailyUsage.toFixed(0) + " " + (unit === 'gallons' ? 'Gal' : 'L');
document.getElementById('res_annual').innerText = annualUsage.toLocaleString('en-US', {maximumFractionDigits: 0}) + " " + (unit === 'gallons' ? 'Gal' : 'L');
// Format Currency
var currencyFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
document.getElementById('res_cost').innerText = currencyFormatter.format(annualCost);
document.getElementById('res_rating').innerText = ratingText;
// Update Status Bar Class
var statusBar = document.getElementById('sfrc_status_bar');
statusBar.className = 'sfrc-status-bar ' + ratingClass;
// Show Results
document.getElementById('sfrc_results').style.display = 'block';
}
Shower Flow Rate Calculator
Step 1: Measure Flow
Gallons (GPM)
Liters (LPM)
Step 2: Household Usage (Optional)
Ex: $4.00 per 1000 Gallons
Flow Rate
–
Water Per Shower
–
Daily Household Usage
–
Annual Water Usage
–
Est. Annual Cost
–
Water Efficiency Rating
–
How to Measure Your Shower Flow Rate
Knowing your shower's flow rate—measured in Gallons Per Minute (GPM) or Liters Per Minute (LPM)—is the first step toward reducing water bills and conserving resources. Many older showerheads use significantly more water than necessary without providing a better shower experience.
The Bucket Test: To use this calculator effectively, place a bucket or container of a known volume (e.g., a 1-gallon milk jug or a 5-liter bucket) under your shower. Turn the water on fully, and time exactly how many seconds it takes to fill the container. Enter these numbers above.
Understanding Flow Rate Standards
- 2.5 GPM (9.5 LPM): The federal maximum standard for showerheads in the USA since 1992.
- 2.0 GPM (7.6 LPM): considered "WaterSense" efficient. These provide great pressure while saving 20% more water.
- Over 3.0 GPM: Likely an older, inefficient fixture that is costing you extra money in both water and heating bills.
Why Lower GPM Matters
Reducing your flow rate doesn't just save water; it saves the energy required to heat that water. A family of four taking daily 10-minute showers with an old 3.5 GPM showerhead consumes over 50,000 gallons of water a year. Switching to a 2.0 GPM head would save approximately 21,900 gallons annually and significantly reduce utility costs.