Free Online Tool

Water Heater Size Calculator

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;color:#1e293b;background:#fff;}body{margin:0;padding:0;background:#fff;color:#1e293b;}img{max-width:100%;height:auto;display:block;}table{max-width:100%;}</style></head><body>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Water Heater Size Calculator</title>
  <style>
    /* General body and layout styles */
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f4f7f6;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      min-height: 100vh;
      margin: 0;
    }

/* Container for the calculator */
    .calculator-container {
      background-color: #ffffff;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      padding: 30px;
      width: 100%;
      max-width: 600px;
      margin-top: 20px;
      text-align: center;
    }

/* Header */
    .calculator-header {
      font-size: 2rem;
      color: #333;
      margin-bottom: 20px;
    }

/* Styling for input fields */
    .input-group {
      margin-bottom: 15px;
      text-align: left;
    }

.input-group label {
      color: #555;
      font-size: 1.1rem;
      margin-bottom: 5px;
      display: block;
    }

.input-group input,
    .input-group select {
      width: 100%;
      padding: 12px;
      font-size: 1rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f9f9f9;
      box-sizing: border-box;
    }

.input-group input[type="number"]:focus,
    .input-group select:focus {
      border-color: #3498db;
      outline: none;
    }

/* Button styling */
    .button-container {
      display: flex;
      justify-content: space-between;
    }

.button-container button {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 15px 20px;
      font-size: 1.2rem;
      border-radius: 8px;
      cursor: pointer;
      width: 45%;
    }

.button-container button:hover {
      background-color: #2980b9;
    }

.button-container button:active {
      background-color: #1d6fa5;
    }

/* Result container */
    .result-container {
      margin-top: 20px;
      text-align: center;
      display: none;
    }

.result-container p {
      font-size: 1.5rem;
      color: #333;
    }

/* Additional content section */
    .additional-content {
      width: 100%;
      max-width: 600px;
      margin-top: 30px;
      padding: 20px;
      background-color: #ffffff;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      text-align: left;
    }

.additional-content h2 {
      color: #333;
    }

.additional-content p {
      color: #555;
      line-height: 1.6;
    }

/* Responsive styling */
    @media (max-width: 480px) {
      .button-container button {
        font-size: 1rem;
        width: 48%;
      }

.input-group input,
      .input-group select {
        font-size: 0.9rem;
      }
    }
  </style>
</head>
<body>

<div class="calculator-container">
    <div class="calculator-header">Water Heater Size Calculator</div>

<div class="input-group">
      <label for="numPeople">Number of People:</label>
      <input type="number" id="numPeople" placeholder="Enter number of people" required>
    </div>
    <div class="input-group">
      <label for="showerTime">Average Shower Time (Minutes):</label>
      <input type="number" id="showerTime" placeholder="Enter average shower time" required>
    </div>
    <div class="input-group">
      <label for="waterUsage">Shower Flow Rate (GPM):</label>
      <input type="number" id="waterUsage" placeholder="Enter flow rate (gallons per minute)" required>
    </div>
    <div class="input-group">
      <label for="recoveryRate">Water Heater Recovery Rate (GPH):</label>
      <input type="number" id="recoveryRate" placeholder="Enter recovery rate (gallons per hour)" required>
    </div>

<div class="button-container">
      <button onclick="calculateSize()">Calculate</button>
      <button onclick="resetCalculator()">Reset</button>
    </div>

<div class="result-container" id="resultContainer">
      <p><strong>Required Heater Size:</strong> <span id="resultValue"></span> Gallons</p>
    </div>
  </div>

<div class="additional-content">
    <h2>Introduction</h2>
    <p>The Water Heater Size Calculator helps you determine the minimum tank size required for your household based on peak water demand. It uses key parameters like the number of people, shower time, water usage, and recovery rate to estimate the needed tank capacity.</p>

<h2>How the Calculator Works</h2>
    <p>This calculator uses the formula:</p>
    <pre>HS = N ⋅ T ⋅ (G - R / 60)</pre>
    <p>Where:</p>
    <ul>
      <li>HS = Required Heater Size</li>
      <li>N = Number of People</li>
      <li>T = Average Shower Time</li>
      <li>G = Shower Flow Rate</li>
      <li>R = Recovery Rate</li>
    </ul>

<h2>FAQ</h2>
    <p><strong>Q:</strong> What if my result is between two heater sizes?<br>
    <strong>A:</strong> It’s usually safer to choose the larger size. Small shortfalls in storage are often noticeable to users.</p>
    <p><strong>Q:</strong> Can this be used for tankless heaters?<br>
    <strong>A:</strong> Not directly. Tankless heaters are sized based on flow rate and temperature rise.</p>
  </div>

// Validate inputs
      if (isNaN(numPeople) || isNaN(showerTime) || isNaN(waterUsage) || isNaN(recoveryRate)) {
        alert("Please fill all fields with valid numbers.");
        return;
      }

// Calculate total shower demand (D)
      const D = numPeople * showerTime * waterUsage;

// Calculate the heater recovery during the same period (H)
      const H = numPeople * showerTime * recoveryRate / 60;

// Calculate the required heater size (HS)
      const HS = D - H;

// Display result
      document.getElementById('resultValue').textContent = HS.toFixed(2);
      document.getElementById('resultContainer').style.display = 'block';
    }

// Function to reset the calculator
    function resetCalculator() {
      document.getElementById('numPeople').value = '';
      document.getElementById('showerTime').value = '';
      document.getElementById('waterUsage').value = '';
      document.getElementById('recoveryRate').value = '';
      document.getElementById('resultContainer').style.display = 'none';
    }
  </script>

</body>
</html>

<p></p>

<h3 class="wp-block-heading"><strong>How It Works:</strong></h3>

<ol class="wp-block-list">
<li><strong>Input Fields:</strong>
<ul class="wp-block-list">
<li>Number of People</li>

<li>Average Shower Time (in minutes)</li>

<li>Shower Flow Rate (gallons per minute)</li>

<li>Water Heater Recovery Rate (gallons per hour)</li>
</ul>
</li>

<li><strong>Calculation Logic:</strong>
<ul class="wp-block-list">
<li>Uses the formulas provided:
<ul class="wp-block-list">
<li><strong>Demand (D) = Number of People × Shower Time × Flow Rate</strong></li>

<li><strong>Recovery (H) = Number of People × Shower Time × Recovery Rate / 60</strong></li>

<li><strong>Required Size (HS) = D &#8211; H</strong></li>
</ul>
</li>
</ul>
</li>

<li><strong>Responsive Design:</strong>
<ul class="wp-block-list">
<li>The tool automatically adjusts for mobile and desktop views. On smaller screens, input fields and buttons shrink for easy use on phones.</li>
</ul>
</li>

<li><strong>Reset Function:</strong>
<ul class="wp-block-list">
<li>Clears all fields and the result when the reset button is clicked.</li>
</ul>
</li>
</ol>
<script>const FRAME_ID = "toolpress-frame-184";</script><script>(function(){function sendHeight(){var h=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,document.documentElement.offsetHeight,document.body.offsetHeight);parent.postMessage({type:'toolpressEmbedHeight',id:FRAME_ID,height:h},'*');}window.addEventListener('load',sendHeight);window.addEventListener('resize',sendHeight);document.addEventListener('input',function(){setTimeout(sendHeight,50);});document.addEventListener('click',function(){setTimeout(sendHeight,50);});setTimeout(sendHeight,60);setTimeout(sendHeight,300);setTimeout(sendHeight,900);})();</script></body></html>