Free Online Tool

Free Water Balance 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 Balance Calculator</title>

body {
      margin: 0;
      padding: 20px;
      background: #f7ffff;
      font-family: Arial, sans-serif;
      color: #123333;
    }

.wbciso-wrap {
      max-width: 1100px;
      margin: 0 auto;
      color: #123333;
    }

.wbciso-card {
      background: #ffffff;
      border: 1px solid #d9eeee;
      border-radius: 18px;
      box-shadow: 0 8px 24px rgba(0, 128, 128, 0.08);
      overflow: hidden;
    }

.wbciso-header {
      background: linear-gradient(135deg, #008b8b, #00a6a6);
      color: #ffffff;
      padding: 24px;
      text-align: center;
    }

.wbciso-header h2 {
      margin: 0 0 8px;
      font-size: 28px;
      color: #ffffff;
    }

.wbciso-header p {
      margin: 0;
      font-size: 15px;
      color: #eaffff;
    }

.wbciso-main {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 24px;
      padding: 24px;
      background: #f7ffff;
    }

.wbciso-input-panel,
    .wbciso-result-panel,
    .wbciso-info-card {
      background: #ffffff;
      border: 1px solid #d7eeee;
      border-radius: 16px;
      padding: 20px;
    }

.wbciso-input-panel h3,
    .wbciso-result-panel h3,
    .wbciso-info-card h3 {
      margin: 0 0 16px;
      color: #007878;
      font-size: 20px;
    }

.wbciso-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

.wbciso-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.wbciso-field label {
      font-size: 14px;
      font-weight: 700;
      color: #164646;
    }

.wbciso-field input,
    .wbciso-field select {
      width: 100%;
      border: 1px solid #b8dddd;
      border-radius: 10px;
      padding: 11px 12px;
      font-size: 15px;
      color: #123333;
      background: #fbffff;
      outline: none;
    }

.wbciso-field input:focus,
    .wbciso-field select:focus {
      border-color: #008b8b;
      box-shadow: 0 0 0 3px rgba(0, 139, 139, 0.12);
    }

.wbciso-actions {
      display: flex;
      gap: 12px;
      margin-top: 18px;
      flex-wrap: wrap;
    }

.wbciso-btn {
      border: none;
      border-radius: 10px;
      padding: 12px 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: 0.2s ease;
    }

.wbciso-btn-primary {
      background: #008b8b;
      color: #ffffff;
    }

.wbciso-btn-primary:hover {
      background: #006f6f;
    }

.wbciso-btn-secondary {
      background: #e8fafa;
      color: #007878;
      border: 1px solid #b8dddd;
    }

.wbciso-btn-secondary:hover {
      background: #d7f4f4;
    }

.wbciso-message {
      margin-top: 14px;
      padding: 12px;
      border-radius: 10px;
      background: #fff8e6;
      border: 1px solid #f0d58a;
      color: #705200;
      display: none;
      font-size: 14px;
    }

.wbciso-result-box {
      background: linear-gradient(135deg, #eaffff, #ffffff);
      border: 1px solid #c8eeee;
      border-radius: 16px;
      padding: 20px;
      text-align: center;
      margin-bottom: 16px;
    }

.wbciso-result-label {
      font-size: 14px;
      color: #376060;
      margin-bottom: 8px;
    }

.wbciso-result-value {
      font-size: 38px;
      font-weight: 800;
      color: #008b8b;
      line-height: 1.1;
    }

.wbciso-result-unit {
      font-size: 15px;
      color: #376060;
      margin-top: 6px;
    }

.wbciso-status {
      margin-top: 12px;
      padding: 10px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 14px;
      background: #e8fafa;
      color: #007878;
      border: 1px solid #b8dddd;
    }

.wbciso-summary {
      display: grid;
      gap: 10px;
    }

.wbciso-summary-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px dashed #c8eeee;
      font-size: 14px;
    }

.wbciso-summary-row:last-child {
      border-bottom: none;
    }

.wbciso-summary-row strong {
      color: #007878;
      text-align: right;
    }

.wbciso-bottom {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 0 24px 24px;
      background: #f7ffff;
    }

.wbciso-info-card p {
      margin: 8px 0;
      line-height: 1.6;
      font-size: 15px;
      color: #254f4f;
    }

.wbciso-breakdown-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

.wbciso-mini-box {
      background: #f2ffff;
      border: 1px solid #d7eeee;
      border-radius: 12px;
      padding: 12px;
      font-size: 14px;
    }

.wbciso-mini-box span {
      display: block;
      color: #376060;
      margin-bottom: 4px;
    }

.wbciso-mini-box strong {
      color: #007878;
      font-size: 16px;
    }

.wbciso-formula {
      background: #f2ffff;
      border-left: 4px solid #008b8b;
      padding: 14px;
      border-radius: 10px;
      overflow-x: auto;
      font-size: 15px;
      color: #123333;
      line-height: 1.6;
    }

@media (max-width: 850px) {
      body {
        padding: 10px;
      }

.wbciso-main {
        grid-template-columns: 1fr;
      }

.wbciso-grid,
      .wbciso-breakdown-list {
        grid-template-columns: 1fr;
      }

.wbciso-result-value {
        font-size: 32px;
      }
    }
  </style>
</head>

<body>
  <div class="wbciso-wrap" id="wbcisoTool">
    <div class="wbciso-card">
      <div class="wbciso-header">
        <h2>Water Balance Calculator</h2>
        <p>Estimate change in storage using precipitation, evapotranspiration, runoff, inflow, and outflow.</p>
      </div>

<div class="wbciso-main">
        <div class="wbciso-input-panel">
          <h3>Enter Water Balance Values</h3>

<div class="wbciso-grid">
            <div class="wbciso-field">
              <label for="wbcisoMode">Calculation Unit</label>
              <select id="wbcisoMode">
                <option value="mm" selected>Depth values (mm)</option>
                <option value="m3">Volume values (m³)</option>
              </select>
            </div>

<div class="wbciso-field">
              <label for="wbcisoArea">System Area (m²)</label>
              <input type="number" id="wbcisoArea" step="any" value="10000">
            </div>

<div class="wbciso-field">
              <label for="wbcisoP">Precipitation P</label>
              <input type="number" id="wbcisoP" step="any" value="200">
            </div>

<div class="wbciso-field">
              <label for="wbcisoET">Evapotranspiration ET</label>
              <input type="number" id="wbcisoET" step="any" value="50">
            </div>

<div class="wbciso-field">
              <label for="wbcisoQ">Runoff Q</label>
              <input type="number" id="wbcisoQ" step="any" value="30">
            </div>

<div class="wbciso-field">
              <label for="wbcisoI">Inflow I</label>
              <input type="number" id="wbcisoI" step="any" value="100">
            </div>

<div class="wbciso-field">
              <label for="wbcisoO">Outflow O</label>
              <input type="number" id="wbcisoO" step="any" value="40">
            </div>

<div class="wbciso-field">
              <label for="wbcisoResultUnit">Main Result Unit</label>
              <select id="wbcisoResultUnit">
                <option value="same" selected>Same as input</option>
                <option value="mm">Millimeters (mm)</option>
                <option value="m3">Cubic meters (m³)</option>
                <option value="liters">Liters (L)</option>
                <option value="acreft">Acre-feet</option>
              </select>
            </div>
          </div>

<div class="wbciso-actions">
            <button type="button" class="wbciso-btn wbciso-btn-primary" id="wbcisoCalculateBtn">Calculate Water Balance</button>
            <button type="button" class="wbciso-btn wbciso-btn-secondary" id="wbcisoResetBtn">Reset</button>
          </div>

<div class="wbciso-result-panel">
          <h3>Result Panel</h3>

<div class="wbciso-result-box">
            <div class="wbciso-result-label">Change in Storage ΔS</div>
            <div class="wbciso-result-value" id="wbcisoResultValue">0.00</div>
            <div class="wbciso-result-unit" id="wbcisoResultUnitText">mm</div>
            <div class="wbciso-status" id="wbcisoStatus">Result status will appear here</div>
          </div>

<div class="wbciso-summary">
            <div class="wbciso-summary-row">
              <span>Total Inputs</span>
              <strong id="wbcisoInputsOut">0.00</strong>
            </div>
            <div class="wbciso-summary-row">
              <span>Total Outputs</span>
              <strong id="wbcisoOutputsOut">0.00</strong>
            </div>
            <div class="wbciso-summary-row">
              <span>Storage Change in mm</span>
              <strong id="wbcisoMmOut">0.00 mm</strong>
            </div>
            <div class="wbciso-summary-row">
              <span>Storage Change in m³</span>
              <strong id="wbcisoM3SummaryOut">0.00 m³</strong>
            </div>
          </div>
        </div>
      </div>

<div class="wbciso-bottom">
        <div class="wbciso-info-card">
          <h3>Unit Conversion & Result Breakdown</h3>
          <p>The calculator shows whether the water system has a surplus, deficit, or near-equilibrium condition based on inflows and outflows.</p>

<div class="wbciso-breakdown-list">
            <div class="wbciso-mini-box">
              <span>Change in storage</span>
              <strong id="wbcisoStorageOut">0.00</strong>
            </div>

<div class="wbciso-mini-box">
              <span>Equivalent volume</span>
              <strong id="wbcisoVolumeOut">0.00 m³</strong>
            </div>

<div class="wbciso-mini-box">
              <span>Equivalent liters</span>
              <strong id="wbcisoLitersOut">0.00 L</strong>
            </div>

<div class="wbciso-mini-box">
              <span>Equivalent acre-feet</span>
              <strong id="wbcisoAcreFeetOut">0.0000 acre-ft</strong>
            </div>

<div class="wbciso-mini-box">
              <span>Input minus output</span>
              <strong id="wbcisoBalanceOut">0.00</strong>
            </div>

<div class="wbciso-mini-box">
              <span>Water balance condition</span>
              <strong id="wbcisoConditionOut">-</strong>
            </div>
          </div>
        </div>

<div class="wbciso-info-card">
          <h3>Formula Used</h3>
          <div class="wbciso-formula">
            ΔS = P − ET − Q + I − O
            <br><br>
            Or:
            <br>
            ΔS = (P + I) − (ET + Q + O)
            <br><br>
            If values are entered in mm and area is provided:
            <br>
            Volume change = ΔS(mm) ÷ 1000 × Area(m²)
          </div>
        </div>

<div class="wbciso-info-card">
          <h3>How to Use</h3>
          <p>Select whether your values are entered as depth values in millimeters or volume values in cubic meters.</p>
          <p>Enter precipitation, evapotranspiration, runoff, inflow, and outflow. Then click <strong>Calculate Water Balance</strong>.</p>
        </div>
      </div>
    </div>
  </div>

function wbcisoSetText(id, text) {
      var element = document.getElementById(id);
      if (element) {
        element.textContent = text;
      }
    }

function wbcisoShowMessage(text) {
      var box = document.getElementById("wbcisoMessage");
      if (box) {
        box.style.display = "block";
        box.textContent = text;
      }
    }

function wbcisoClearMessage() {
      var box = document.getElementById("wbcisoMessage");
      if (box) {
        box.style.display = "none";
        box.textContent = "";
      }
    }

function wbcisoFormatNumber(number, decimals) {
      if (!isFinite(number)) {
        return "0.00";
      }

return Number(number).toLocaleString(undefined, {
        minimumFractionDigits: decimals,
        maximumFractionDigits: decimals
      });
    }

function wbcisoGetCondition(delta) {
      if (delta > 0) {
        return "Surplus / Storage Increase";
      }

if (delta < 0) {
        return "Deficit / Storage Decrease";
      }

return "Equilibrium / No Storage Change";
    }

function wbcisoCalculateWaterBalance() {
      wbcisoClearMessage();

var mode = document.getElementById("wbcisoMode").value;
      var selectedResultUnit = document.getElementById("wbcisoResultUnit").value;

var area = wbcisoGetValue("wbcisoArea");
      var p = wbcisoGetValue("wbcisoP");
      var et = wbcisoGetValue("wbcisoET");
      var q = wbcisoGetValue("wbcisoQ");
      var inflow = wbcisoGetValue("wbcisoI");
      var outflow = wbcisoGetValue("wbcisoO");

var values = [p, et, q, inflow, outflow];

for (var i = 0; i < values.length; i++) {
        if (isNaN(values[i])) {
          wbcisoShowMessage("Please enter valid numeric values for all water balance fields.");
          return;
        }

if (values[i] < 0) {
          wbcisoShowMessage("Values cannot be negative. Use 0 if a component does not apply.");
          return;
        }
      }

if (!isNaN(area) && area < 0) {
        wbcisoShowMessage("System area cannot be negative.");
        return;
      }

var totalInputs = p + inflow;
      var totalOutputs = et + q + outflow;
      var delta = totalInputs - totalOutputs;
      var inputUnit = mode === "mm" ? "mm" : "m³";
      var condition = wbcisoGetCondition(delta);

var deltaMm = null;
      var deltaM3 = null;

if (mode === "mm") {
        deltaMm = delta;

if (!isNaN(area) && area > 0) {
          deltaM3 = (deltaMm / 1000) * area;
        }
      } else {
        deltaM3 = delta;

if (!isNaN(area) && area > 0) {
          deltaMm = (deltaM3 / area) * 1000;
        }
      }

var deltaLiters = deltaM3 !== null ? deltaM3 * 1000 : null;
      var deltaAcreFeet = deltaM3 !== null ? deltaM3 / 1233.48184 : null;

var displayValue = delta;
      var displayUnit = inputUnit;
      var displayDecimals = 2;

if (selectedResultUnit === "mm") {
        if (deltaMm === null) {
          wbcisoShowMessage("To show result in mm from m³ values, please enter a positive system area.");
          return;
        }

displayValue = deltaMm;
        displayUnit = "mm";
        displayDecimals = 2;
      }

if (selectedResultUnit === "m3") {
        if (deltaM3 === null) {
          wbcisoShowMessage("To show result in m³ from mm values, please enter a positive system area.");
          return;
        }

displayValue = deltaM3;
        displayUnit = "m³";
        displayDecimals = 3;
      }

if (selectedResultUnit === "liters") {
        if (deltaLiters === null) {
          wbcisoShowMessage("To show result in liters from mm values, please enter a positive system area.");
          return;
        }

displayValue = deltaLiters;
        displayUnit = "L";
        displayDecimals = 2;
      }

if (selectedResultUnit === "acreft") {
        if (deltaAcreFeet === null) {
          wbcisoShowMessage("To show result in acre-feet from mm values, please enter a positive system area.");
          return;
        }

displayValue = deltaAcreFeet;
        displayUnit = "acre-ft";
        displayDecimals = 4;
      }

wbcisoSetText("wbcisoResultValue", wbcisoFormatNumber(displayValue, displayDecimals));
      wbcisoSetText("wbcisoResultUnitText", displayUnit);
      wbcisoSetText("wbcisoStatus", condition);

wbcisoSetText("wbcisoInputsOut", wbcisoFormatNumber(totalInputs, 2) + " " + inputUnit);
      wbcisoSetText("wbcisoOutputsOut", wbcisoFormatNumber(totalOutputs, 2) + " " + inputUnit);

wbcisoSetText("wbcisoMmOut", deltaMm !== null ? wbcisoFormatNumber(deltaMm, 2) + " mm" : "Area required");
      wbcisoSetText("wbcisoM3SummaryOut", deltaM3 !== null ? wbcisoFormatNumber(deltaM3, 3) + " m³" : "Area required");

wbcisoSetText("wbcisoStorageOut", wbcisoFormatNumber(delta, 2) + " " + inputUnit);
      wbcisoSetText("wbcisoVolumeOut", deltaM3 !== null ? wbcisoFormatNumber(deltaM3, 3) + " m³" : "Area required");
      wbcisoSetText("wbcisoLitersOut", deltaLiters !== null ? wbcisoFormatNumber(deltaLiters, 2) + " L" : "Area required");
      wbcisoSetText("wbcisoAcreFeetOut", deltaAcreFeet !== null ? wbcisoFormatNumber(deltaAcreFeet, 4) + " acre-ft" : "Area required");
      wbcisoSetText("wbcisoBalanceOut", wbcisoFormatNumber(totalInputs, 2) + " − " + wbcisoFormatNumber(totalOutputs, 2));
      wbcisoSetText("wbcisoConditionOut", condition);
    }

function wbcisoResetWaterBalance() {
      document.getElementById("wbcisoMode").value = "mm";
      document.getElementById("wbcisoArea").value = "10000";
      document.getElementById("wbcisoP").value = "200";
      document.getElementById("wbcisoET").value = "50";
      document.getElementById("wbcisoQ").value = "30";
      document.getElementById("wbcisoI").value = "100";
      document.getElementById("wbcisoO").value = "40";
      document.getElementById("wbcisoResultUnit").value = "same";

wbcisoClearMessage();

wbcisoSetText("wbcisoResultValue", "0.00");
      wbcisoSetText("wbcisoResultUnitText", "mm");
      wbcisoSetText("wbcisoStatus", "Result status will appear here");

wbcisoSetText("wbcisoInputsOut", "0.00");
      wbcisoSetText("wbcisoOutputsOut", "0.00");
      wbcisoSetText("wbcisoMmOut", "0.00 mm");
      wbcisoSetText("wbcisoM3SummaryOut", "0.00 m³");

wbcisoSetText("wbcisoStorageOut", "0.00");
      wbcisoSetText("wbcisoVolumeOut", "0.00 m³");
      wbcisoSetText("wbcisoLitersOut", "0.00 L");
      wbcisoSetText("wbcisoAcreFeetOut", "0.0000 acre-ft");
      wbcisoSetText("wbcisoBalanceOut", "0.00");
      wbcisoSetText("wbcisoConditionOut", "-");
    }

document.getElementById("wbcisoCalculateBtn").addEventListener("click", function () {
      wbcisoCalculateWaterBalance();
    });