.calculator-container {
max-width: 800px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #333;
line-height: 1.6;
}
.calc-box {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 25px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
margin-bottom: 40px;
}
.calc-title {
text-align: center;
color: #0077b6;
margin-bottom: 25px;
font-size: 24px;
font-weight: bold;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #495057;
}
.input-row {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.input-col {
flex: 1;
min-width: 200px;
}
.form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.form-control:focus {
border-color: #0077b6;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
}
.btn-calculate {
width: 100%;
background-color: #0077b6;
color: white;
border: none;
padding: 15px;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
margin-top: 10px;
}
.btn-calculate:hover {
background-color: #005f92;
}
.results-box {
margin-top: 25px;
background-color: #e7f5ff;
border: 1px solid #bce6ff;
border-radius: 6px;
padding: 20px;
display: none;
}
.result-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #d0ebff;
}
.result-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.result-label {
font-weight: 600;
color: #004085;
}
.result-value {
font-size: 20px;
font-weight: bold;
color: #0077b6;
}
.article-content {
margin-top: 40px;
padding: 20px;
background: white;
}
.article-content h2 {
color: #2c3e50;
border-bottom: 2px solid #0077b6;
padding-bottom: 10px;
margin-top: 30px;
}
.article-content h3 {
color: #34495e;
margin-top: 20px;
}
.article-content ul {
padding-left: 20px;
}
.article-content li {
margin-bottom: 10px;
}
.coefficient-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.coefficient-table th, .coefficient-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
.coefficient-table th {
background-color: #f2f2f2;
color: #333;
}
.unit-toggle {
margin-bottom: 20px;
text-align: right;
}
var currentUnit = 'imperial';
function toggleUnits() {
var unitSystem = document.getElementById('unitSystem').value;
var lengthLabel = document.getElementById('lengthLabel');
var widthLabel = document.getElementById('widthLabel');
var intensityLabel = document.getElementById('intensityLabel');
var lengthInput = document.getElementById('roofLength');
var widthInput = document.getElementById('roofWidth');
var intensityInput = document.getElementById('rainIntensity');
currentUnit = unitSystem;
if (unitSystem === 'metric') {
lengthLabel.innerText = "Roof Length (meters)";
widthLabel.innerText = "Roof Width (meters)";
intensityLabel.innerText = "Rainfall Intensity (mm/hour)";
lengthInput.placeholder = "e.g., 12";
widthInput.placeholder = "e.g., 8";
intensityInput.placeholder = "e.g., 50";
} else {
lengthLabel.innerText = "Roof Length (ft)";
widthLabel.innerText = "Roof Width (ft)";
intensityLabel.innerText = "Rainfall Intensity (inches/hour)";
lengthInput.placeholder = "e.g., 40";
widthInput.placeholder = "e.g., 25";
intensityInput.placeholder = "e.g., 2.0";
}
// Clear results when switching units to avoid confusion
document.getElementById('results').style.display = 'none';
}
function calculateRainFlow() {
// Get input values
var length = parseFloat(document.getElementById('roofLength').value);
var width = parseFloat(document.getElementById('roofWidth').value);
var intensity = parseFloat(document.getElementById('rainIntensity').value);
var efficiency = parseFloat(document.getElementById('surfaceType').value);
// Validation
if (isNaN(length) || isNaN(width) || isNaN(intensity)) {
alert("Please enter valid numbers for dimensions and rainfall intensity.");
return;
}
var area = length * width;
var flowPerHour = 0;
var flowPerMin = 0;
var unitArea = "";
var unitFlowMin = "";
var unitFlowHour = "";
if (currentUnit === 'imperial') {
// Imperial Calculation
// Area (sq ft) * Intensity (inches) * 0.623 (gallons per inch per sq ft) * Efficiency
unitArea = "sq. ft.";
unitFlowMin = "GPM (Gallons/min)";
unitFlowHour = "GPH (Gallons/hour)";
var gallonsPerHour = area * intensity * 0.623 * efficiency;
flowPerHour = gallonsPerHour;
flowPerMin = gallonsPerHour / 60;
} else {
// Metric Calculation
// Area (sq m) * Intensity (mm) * 1 (liter per mm per sq m) * Efficiency
unitArea = "sq. meters";
unitFlowMin = "LPM (Liters/min)";
unitFlowHour = "LPH (Liters/hour)";
var litersPerHour = area * intensity * 1.0 * efficiency;
flowPerHour = litersPerHour;
flowPerMin = litersPerHour / 60;
}
// Gutter Sizing Logic (Rough approximation for context)
var gutterRec = "";
if (currentUnit === 'imperial') {
if (flowPerMin < 20) {
gutterRec = "Standard 5-inch K-style gutters likely sufficient.";
} else if (flowPerMin < 40) {
gutterRec = "Consider 6-inch K-style gutters or additional downspouts.";
} else {
gutterRec = "High flow! Requires 6-inch+ commercial gutters and multiple large downspouts.";
}
} else {
if (flowPerMin < 75) {
gutterRec = "Standard residential gutters (100-125mm) likely sufficient.";
} else if (flowPerMin < 150) {
gutterRec = "Consider larger gutters (150mm) or additional downspouts.";
} else {
gutterRec = "High flow! Requires commercial grade drainage systems.";
}
}
// Display Results
document.getElementById('resultArea').innerText = area.toFixed(2) + " " + unitArea;
document.getElementById('resultFlowMin').innerText = flowPerMin.toFixed(2) + " " + unitFlowMin;
document.getElementById('resultFlowHour').innerText = flowPerHour.toFixed(0) + " " + unitFlowHour;
document.getElementById('resultGutter').innerText = gutterRec;
document.getElementById('results').style.display = 'block';
}
Rain Water Flow Rate Calculator
Imperial (Feet / Inches / Gallons)
Metric (Meters / Millimeters / Liters)
Typical heavy rain is 1-2 in/hr (25-50 mm/hr). Extreme storms can exceed 5 in/hr.
Metal / Steel (High Runoff – 0.95)
Asphalt Shingles / Concrete (Standard – 0.90)
Clay Tiles / Slate (0.80)
Gravel / Flat Roof with Detritus (0.70)
Green Roof / Intensive Vegetated (0.50)
Theoretical Maximum (1.00)
Catchment Area:
–
Flow Rate (Per Minute):
–
Flow Rate (Per Hour):
–
Gutter Sizing Recommendation:
–
How to Calculate Rain Water Flow Rate
Calculating the flow rate of rainwater from a roof or catchment area is critical for designing efficient drainage systems, sizing gutters, and planning rainwater harvesting systems. Failure to account for peak flow rates can result in overflowing gutters, foundation damage, and flooding.
The Rational Method Formula
The most common formula used by hydraulic engineers and architects to calculate runoff is a variation of the Rational Method:
Q = C × I × A
- Q (Flow Rate): The total volume of water moving off the surface over time.
- C (Coefficient): The runoff coefficient, which represents the efficiency of the surface. A metal roof is very efficient (allows most water to flow off), while a green roof absorbs water, lowering the flow.
- I (Intensity): The rate of rainfall, usually measured in inches per hour or millimeters per hour.
- A (Area): The footprint of the roof or catchment surface.
Understanding Runoff Coefficients
Not all rain that hits a roof makes it to the gutter. Some evaporates, some splashes out, and some is absorbed (especially on flat or green roofs). The runoff coefficient helps adjust the calculation for reality.
| Surface Material | Runoff Coefficient (C) | Efficiency |
|---|---|---|
| Metal / Steel | 0.95 | 95% |
| Concrete / Asphalt | 0.90 | 90% |
| Tiles / Slate | 0.80 – 0.85 | 80-85% |
| Gravel / Flat Roofs | 0.70 | 70% |
| Green Roofs | 0.40 – 0.50 | 40-50% |
Why Rain Intensity Matters
While the total annual rainfall tells you how much water you can harvest in a year, the rainfall intensity determines how big your pipes and gutters need to be.
For gutter sizing, you should typically design for a "worst-case" storm event, often a 5-minute or 10-minute peak intensity. In many temperate climates, a standard design intensity is 2 to 3 inches per hour (50-75mm/hr), but tropical areas may require designs for 6+ inches per hour.
Calculation Examples
Example 1: Imperial Units
A house has a roof area of 2,000 sq ft. The rainfall intensity is 2 inches/hour. The roof is made of asphalt shingles (Coefficient 0.90).
- Formula: Area × Rainfall × 0.623 (conversion factor) × Coefficient
- Calculation: 2,000 × 2 × 0.623 × 0.90 = 2,242.8 Gallons per Hour
- Per Minute: 2,242.8 / 60 = 37.38 Gallons per Minute (GPM)
Example 2: Metric Units
A garage has a roof area of 100 m². The rainfall intensity is 50 mm/hour. The roof is metal (Coefficient 0.95).
- Formula: Area × Rainfall × 1 (conversion) × Coefficient
- Calculation: 100 × 50 × 1 × 0.95 = 4,750 Liters per Hour
- Per Minute: 4,750 / 60 = 79.17 Liters per Minute (LPM)