DEV Community: ashkan hoseinpoor

Detect Industrial Heater Failures with JavaScript: A Rule-Based Anomaly Detection System

ashkan hoseinpoor — Tue, 28 Jul 2026 20:30:12 +0000

Detect Industrial Heater Failures with JavaScript: A Rule-Based Anomaly Detection System

Industrial electric heaters rarely fail without warning.

Before a heating element burns out completely, the system may show signs such as:

A slower-than-normal temperature rise
High current without sufficient heating
Temperature increase while the heater is supposed to be off
A temperature sensor stuck at one value
Excessive overshoot above the target temperature
Sudden and unrealistic temperature changes

In industrial systems, these symptoms may indicate problems with the heating element, thermocouple, contactor, solid-state relay, wiring, airflow, or temperature controller.

In this tutorial, we will build a browser-based heater anomaly detector using JavaScript.

The application will analyze simulated temperature and current readings and detect several common heater faults without using machine learning or external libraries.

What We Are Building

Our monitoring system will receive a new data sample every second.

Each sample contains:

{
timestamp: 1720000000000,
temperature: 82.4,
current: 13.6,
heaterCommand: true,
targetTemperature: 120
}

The application will monitor:

Heating rate
Current flow
Temperature overshoot
Sensor activity
Unexpected heating
Sudden sensor changes

It will then classify the system status as:

NORMAL
WARNING
FAULT

Why Use Rule-Based Detection?

Machine learning can be useful when large historical datasets are available.

However, many industrial heating systems do not have enough labeled failure data to train a reliable model.

A rule-based system offers several advantages:

Easy to understand
Easy to test
Fast to execute
No training dataset required
Suitable for browsers and embedded dashboards
Thresholds can be adjusted for each heater

The main limitation is that thresholds must be configured according to the real process.

A 3 kW water heater behaves differently from a 30 kW industrial oven.

Project Structure

Create the following files:

heater-anomaly-detector/
├── index.html
├── style.css
└── app.js

Step 1: Create the HTML Interface

Add the following code to "index.html":

<!DOCTYPE html>

Industrial Heater Anomaly Detector

Industrial Monitoring Demo

    <h1>Heater Anomaly Detector</h1>

    <p>
      Monitor temperature, current, heating rate,
      and common heater failure patterns.
    </p>
  </div>

  <div
    id="system-status"
    class="status status-normal"
  >
    NORMAL
  </div>
</header>

<section class="metrics">
  <article class="metric-card">
    <span>Temperature</span>
    <strong id="temperature-value">-- °C</strong>
  </article>

  <article class="metric-card">
    <span>Target</span>
    <strong id="target-value">-- °C</strong>
  </article>

  <article class="metric-card">
    <span>Current</span>
    <strong id="current-value">-- A</strong>
  </article>

  <article class="metric-card">
    <span>Heating rate</span>
    <strong id="heating-rate-value">
      -- °C/min
    </strong>
  </article>
</section>

<section class="panel">
  <div class="panel-heading">
    <div>
      <h2>Temperature History</h2>
      <p>
        Recent process temperature and target value
      </p>
    </div>

    <div class="legend">
      <span>
        <i class="temperature-marker"></i>
        Temperature
      </span>

      <span>
        <i class="target-marker"></i>
        Target
      </span>
    </div>
  </div>

  <canvas
    id="temperature-chart"
    width="900"
    height="360"
  ></canvas>
</section>

<section class="controls panel">
  <div>
    <h2>Simulation Mode</h2>

    <p>
      Select a condition to test the detection rules.
    </p>
  </div>

  <div class="control-buttons">
    <button data-mode="normal">
      Normal operation
    </button>

    <button data-mode="weak-heater">
      Weak heater
    </button>

    <button data-mode="open-circuit">
      Open circuit
    </button>

    <button data-mode="stuck-sensor">
      Stuck sensor
    </button>

    <button data-mode="relay-stuck">
      Relay stuck on
    </button>

    <button data-mode="overheating">
      Overheating
    </button>
  </div>
</section>

<section class="panel">
  <div class="panel-heading">
    <div>
      <h2>Diagnostic Events</h2>

      <p>
        Warnings and detected fault conditions
      </p>
    </div>

    <button
      id="clear-events"
      class="secondary-button"
    >
      Clear events
    </button>
  </div>

  <div id="event-list" class="event-list">
    <p class="empty-state">
      No abnormal condition detected.
    </p>
  </div>
</section>

Step 2: Style the Dashboard

Add the following code to "style.css":

{ box-sizing: border-box; }

:root {
font-family:
Inter,
Arial,
Helvetica,
sans-serif;

color: #172033;
background: #eef2f7;
}

body {
margin: 0;
padding: 32px 20px;
}

button {
font: inherit;
}

.dashboard {
width: min(1180px, 100%);
margin: 0 auto;
}

.dashboard-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 26px;
}

.eyebrow {
display: block;
margin-bottom: 8px;
color: #d97706;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

h1,
h2,
p {
margin-top: 0;
}

h1 {
margin-bottom: 10px;
font-size: clamp(32px, 5vw, 52px);
line-height: 1.05;
}

h2 {
margin-bottom: 6px;
font-size: 20px;
}

.dashboard-header p,
.panel-heading p,
.controls p {
margin-bottom: 0;
color: #64748b;
line-height: 1.7;
}

.status {
min-width: 130px;
padding: 13px 18px;
border-radius: 999px;
text-align: center;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.06em;
}

.status-normal {
background: #dcfce7;
color: #166534;
}

.status-warning {
background: #fef3c7;
color: #92400e;
}

.status-fault {
background: #fee2e2;
color: #b91c1c;
}

.metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 18px;
}

.metric-card,
.panel {
border: 1px solid #e2e8f0;
background: #ffffff;
box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.metric-card {
padding: 22px;
border-radius: 16px;
}

.metric-card span {
display: block;
margin-bottom: 10px;
color: #64748b;
font-size: 14px;
}

.metric-card strong {
font-size: 25px;
}

.panel {
margin-bottom: 18px;
padding: 24px;
border-radius: 18px;
}

.panel-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}

.legend {
display: flex;
gap: 16px;
color: #64748b;
font-size: 13px;
}

.legend span {
display: flex;
align-items: center;
gap: 7px;
}

.legend i {
width: 24px;
height: 4px;
border-radius: 99px;
}

.temperature-marker {
background: #ea580c;
}

.target-marker {
background: #2563eb;
}

canvas {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
background: #f8fafc;
}

.controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}

.control-buttons {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 9px;
}

.control-buttons button,
.secondary-button {
min-height: 42px;
padding: 9px 14px;
border: 1px solid #d7dee8;
border-radius: 9px;
background: #f8fafc;
color: #334155;
cursor: pointer;
}

.control-buttons button:hover,
.control-buttons button.active {
border-color: #f59e0b;
background: #fff7ed;
color: #9a3412;
}

.secondary-button:hover {
background: #eef2f7;
}

.event-list {
display: grid;
gap: 10px;
}

.event-item {
padding: 15px 16px;
border-left: 5px solid;
border-radius: 9px;
background: #f8fafc;
}

.event-item strong {
display: block;
margin-bottom: 5px;
}

.event-item p {
margin-bottom: 5px;
color: #475569;
line-height: 1.5;
}

.event-item time {
color: #94a3b8;
font-size: 12px;
}

.event-warning {
border-color: #f59e0b;
background: #fffbeb;
}

.event-fault {
border-color: #dc2626;
background: #fef2f2;
}

.empty-state {
margin: 0;
padding: 20px;
border: 1px dashed #cbd5e1;
border-radius: 10px;
color: #64748b;
text-align: center;
}

@media (max-width: 900px) {
.metrics {
grid-template-columns: repeat(2, 1fr);
}

.controls {
align-items: flex-start;
flex-direction: column;
}

.control-buttons {
justify-content: flex-start;
}
}

@media (max-width: 560px) {
body {
padding: 20px 12px;
}

.dashboard-header {
flex-direction: column;
}

.metrics {
grid-template-columns: 1fr;
}

.panel-heading {
flex-direction: column;
}

.legend {
flex-wrap: wrap;
}

.control-buttons {
display: grid;
width: 100%;
grid-template-columns: 1fr;
}

.control-buttons button {
width: 100%;
}
}

Step 3: Define the Detection Thresholds

We need configurable thresholds before implementing the diagnostic logic.

Add the following code to "app.js":

const config = {
sampleIntervalMs: 1000,
maximumHistorySize: 90,

minimumActiveCurrent: 1,
expectedCurrent: 13.6,
currentTolerance: 0.25,

minimumHeatingRate: 0.35,
maximumHeatingRate: 8,

maximumOvershoot: 12,
maximumUnexpectedHeatingRate: 0.4,

stuckSensorWindow: 10,
stuckSensorTolerance: 0.05,

suddenTemperatureChange: 12,

faultConfirmationSamples: 5
};

These values are only suitable for a demonstration.

In a real installation, thresholds should be determined from:

Heater power
Heated material
Process volume
Thermal insulation
Sensor response time
Ambient conditions
Normal heating curve
Control strategy
Sample interval

Step 4: Create the Application State

Add the following code below the configuration:

const state = {
mode: "normal",
temperature: 24,
targetTemperature: 120,
current: 0,
heaterCommand: true,
history: [],
faultCounters: new Map(),
reportedFaults: new Set()
};

const elements = {
status: document.getElementById("system-status"),
temperature: document.getElementById(
"temperature-value"
),
target: document.getElementById("target-value"),
current: document.getElementById("current-value"),
heatingRate: document.getElementById(
"heating-rate-value"
),
eventList: document.getElementById("event-list"),
chart: document.getElementById(
"temperature-chart"
),
clearEvents: document.getElementById(
"clear-events"
)
};

const chartContext = elements.chart.getContext("2d");

The application stores recent samples in the "history" array.

Fault counters are used to avoid reporting an error after only one abnormal reading.

Step 5: Simulate Heater Data

Add the following simulation function:

function generateSample() {
const noise = randomBetween(-0.08, 0.08);

let temperatureChange = 0;
let current = 0;
let heaterCommand =
state.temperature < state.targetTemperature;

switch (state.mode) {
case "normal":
current = heaterCommand
? randomBetween(13.2, 13.9)
: 0;

  temperatureChange = heaterCommand
    ? randomBetween(0.11, 0.18)
    : randomBetween(-0.04, -0.01);

  break;

case "weak-heater":
  current = heaterCommand
    ? randomBetween(12.9, 13.8)
    : 0;

  temperatureChange = heaterCommand
    ? randomBetween(0.01, 0.035)
    : -0.02;

  break;

case "open-circuit":
  current = 0;
  temperatureChange = -0.02;
  break;

case "stuck-sensor":
  current = heaterCommand ? 13.6 : 0;
  temperatureChange = 0;
  break;

case "relay-stuck":
  heaterCommand = false;
  current = randomBetween(13.2, 13.9);
  temperatureChange = randomBetween(0.1, 0.16);
  break;

case "overheating":
  current = randomBetween(13.2, 13.9);
  temperatureChange = randomBetween(0.32, 0.45);
  heaterCommand = true;
  break;

default:
  throw new Error(
    `Unknown simulation mode: ${state.mode}`
  );

}

state.temperature += temperatureChange + noise;

if (
state.mode === "normal" &&
state.temperature >= state.targetTemperature
) {
state.temperature =
state.targetTemperature +
randomBetween(-0.8, 0.8);
}

state.current = Math.max(0, current);
state.heaterCommand = heaterCommand;

return {
timestamp: Date.now(),
temperature: state.temperature,
current: state.current,
heaterCommand: state.heaterCommand,
targetTemperature: state.targetTemperature
};
}

function randomBetween(minimum, maximum) {
return (
Math.random() * (maximum - minimum) +
minimum
);
}

Each simulation mode represents a different operating condition.

Normal operation

The heater current is close to its expected value and temperature rises normally.

Weak heater

Current is present, but the temperature rises too slowly.

Possible causes include:

Reduced supply voltage
Incorrect element resistance
Partial element failure
Excessive heat loss
Poor thermal contact
Insufficient heater capacity

Open circuit

The controller requests heat, but no current flows.

Possible causes include:

Burned heating element
Open fuse
Broken wire
Failed contactor
Disconnected terminal
Protection device activated

Stuck sensor

The sensor value does not change despite heater operation.

Possible causes include:

Frozen software value
Failed transmitter
Disconnected sensor
Incorrect analog input configuration
Communication failure

Relay stuck on

The controller sends an off command, but current continues to flow and temperature rises.

This can happen when:

A contactor is mechanically welded
A solid-state relay fails in a closed state
Control wiring is incorrect
The output signal is bypassed

Overheating

The temperature rises too rapidly or exceeds the acceptable target range.

Step 6: Calculate the Heating Rate

The temperature slope is one of the most useful values for heater monitoring.

Add this function:

function calculateHeatingRate(history) {
if (history.length < 2) {
return 0;
}

const windowSize = Math.min(15, history.length);

const firstSample =
history[history.length - windowSize];

const lastSample =
history[history.length - 1];

const temperatureDifference =
lastSample.temperature -
firstSample.temperature;

const timeDifferenceMinutes =
(
lastSample.timestamp -
firstSample.timestamp
) / 60000;

if (timeDifferenceMinutes <= 0) {
return 0;
}

return (
temperatureDifference /
timeDifferenceMinutes
);
}

The formula is:

Heating rate =
Temperature change ÷ Time change

The result is expressed in degrees Celsius per minute.

Using several samples instead of only two readings reduces the effect of sensor noise.

Step 7: Create the Diagnostic Rules

Add the main analysis function:

function analyzeSample(sample) {
const events = [];
const heatingRate = calculateHeatingRate(
state.history
);

detectOpenCircuit(sample, events);
detectWeakHeating(sample, heatingRate, events);
detectUnexpectedHeating(
sample,
heatingRate,
events
);
detectOverheating(sample, events);
detectStuckSensor(sample, events);
detectSuddenTemperatureChange(events);

updateFaultConfirmations(events);

return {
heatingRate,
events
};
}

Now add each individual rule.

Rule 1: Detect an Open Circuit

function detectOpenCircuit(sample, events) {
const heatingRequested =
sample.heaterCommand === true;

const noCurrent =
sample.current <
config.minimumActiveCurrent;

if (heatingRequested && noCurrent) {
events.push({
code: "OPEN_CIRCUIT",
level: "fault",
title: "No heater current detected",
message:
"The controller is requesting heat, but the measured current is below the active threshold."
});
}
}

The rule compares the controller command with measured current.

A heater command without current is a strong indicator of an electrical fault.

Rule 2: Detect Weak Heating

function detectWeakHeating(
sample,
heatingRate,
events
) {
const heaterIsActive =
sample.heaterCommand &&
sample.current >=
config.minimumActiveCurrent;

const enoughSamples =
state.history.length >= 12;

const rateIsTooLow =
heatingRate <
config.minimumHeatingRate;

if (
heaterIsActive &&
enoughSamples &&
rateIsTooLow
) {
events.push({
code: "LOW_HEATING_RATE",
level: "warning",
title: "Heating rate is too low",
message:
The heater is drawing current, but the measured heating rate is only ${heatingRate.toFixed(2)} °C/min.
});
}
}

This condition can detect a heater that still consumes electrical power but does not transfer enough heat into the process.

Rule 3: Detect Unexpected Heating

function detectUnexpectedHeating(
sample,
heatingRate,
events
) {
const heaterShouldBeOff =
sample.heaterCommand === false;

const currentIsFlowing =
sample.current >=
config.minimumActiveCurrent;

const temperatureIsRising =
heatingRate >
config.maximumUnexpectedHeatingRate;

if (
heaterShouldBeOff &&
currentIsFlowing &&
temperatureIsRising
) {
events.push({
code: "RELAY_STUCK_ON",
level: "fault",
title: "Possible relay stuck on",
message:
"Current is flowing and temperature is increasing while the heater command is off."
});
}
}

This is one of the most important safety rules in the application.

A stuck contactor or solid-state relay may continue energizing the heater even after the controller turns the output off.

Rule 4: Detect Overheating

function detectOverheating(sample, events) {
const maximumAllowedTemperature =
sample.targetTemperature +
config.maximumOvershoot;

if (
sample.temperature >
maximumAllowedTemperature
) {
events.push({
code: "OVER_TEMPERATURE",
level: "fault",
title: "Overtemperature detected",
message:
The process temperature is ${sample.temperature.toFixed(1)} °C, above the maximum allowed value of ${maximumAllowedTemperature.toFixed(1)} °C.
});
}
}

A real industrial system should also have an independent hardware overtemperature protection device.

Software monitoring must not be the only safety layer.

Rule 5: Detect a Stuck Sensor

function detectStuckSensor(sample, events) {
const windowSize =
config.stuckSensorWindow;

if (state.history.length < windowSize) {
return;
}

const recentSamples =
state.history.slice(-windowSize);

const temperatures =
recentSamples.map(
(item) => item.temperature
);

const minimumTemperature =
Math.min(...temperatures);

const maximumTemperature =
Math.max(...temperatures);

const totalVariation =
maximumTemperature -
minimumTemperature;

const heaterHasBeenActive =
recentSamples.every(
(item) =>
item.heaterCommand &&
item.current >=
config.minimumActiveCurrent
);

if (
heaterHasBeenActive &&
totalVariation <=
config.stuckSensorTolerance
) {
events.push({
code: "STUCK_SENSOR",
level: "fault",
title: "Temperature sensor may be stuck",
message:
"The temperature value has not changed while the heater has remained active."
});
}
}

The rule checks whether the sensor value remains nearly constant over several samples.

Rule 6: Detect Sudden Temperature Changes

function detectSuddenTemperatureChange(
events
) {
if (state.history.length < 2) {
return;
}

const currentSample =
state.history[state.history.length - 1];

const previousSample =
state.history[state.history.length - 2];

const difference = Math.abs(
currentSample.temperature -
previousSample.temperature
);

if (
difference >
config.suddenTemperatureChange
) {
events.push({
code: "SENSOR_SPIKE",
level: "warning",
title: "Unrealistic temperature change",
message:
The sensor value changed by ${difference.toFixed(1)} °C between two consecutive samples.
});
}
}

A large one-second temperature jump may indicate electrical noise, a loose thermocouple connection, data corruption, or a scaling problem.

Step 8: Prevent False Alarms

One abnormal sample should not always generate a fault.

Add this confirmation system:

function updateFaultConfirmations(events) {
const activeCodes = new Set(
events.map((event) => event.code)
);

for (const event of events) {
const currentCount =
state.faultCounters.get(event.code) ?? 0;

const newCount = currentCount + 1;

state.faultCounters.set(
  event.code,
  newCount
);

if (
  newCount >=
    config.faultConfirmationSamples &&
  !state.reportedFaults.has(event.code)
) {
  addDiagnosticEvent(event);
  state.reportedFaults.add(event.code);
}

}

for (
const code
of state.faultCounters.keys()
) {
if (!activeCodes.has(code)) {
state.faultCounters.set(code, 0);
state.reportedFaults.delete(code);
}
}
}

The anomaly must remain active for several consecutive samples before it is reported.

This approach is called persistence filtering or fault debounce.

It reduces false alarms caused by brief electrical noise or normal process variation.

Step 9: Update the Interface

Add the following functions:

function updateMetrics(
sample,
heatingRate
) {
elements.temperature.textContent =
${sample.temperature.toFixed(1)} °C;

elements.target.textContent =
${sample.targetTemperature.toFixed(1)} °C;

elements.current.textContent =
${sample.current.toFixed(1)} A;

elements.heatingRate.textContent =
${heatingRate.toFixed(2)} °C/min;
}

function updateStatus(events) {
const hasFault = events.some(
(event) => event.level === "fault"
);

const hasWarning = events.some(
(event) => event.level === "warning"
);

elements.status.className = "status";

if (hasFault) {
elements.status.textContent = "FAULT";
elements.status.classList.add(
"status-fault"
);
return;
}

if (hasWarning) {
elements.status.textContent = "WARNING";
elements.status.classList.add(
"status-warning"
);
return;
}

elements.status.textContent = "NORMAL";
elements.status.classList.add(
"status-normal"
);
}

Add the event renderer:

function addDiagnosticEvent(event) {
const emptyState =
elements.eventList.querySelector(
".empty-state"
);

if (emptyState) {
emptyState.remove();
}

const item =
document.createElement("article");

item.className =
event-item event-${event.level};

const timestamp =
new Date().toLocaleTimeString();

item.innerHTML = `
${escapeHtml(event.title)}

<p>${escapeHtml(event.message)}</p>

<time>${timestamp}</time>

elements.eventList.prepend(item);
}

function escapeHtml(value) {
const element =
document.createElement("div");

element.textContent = value;

return element.innerHTML;
}

Even though our messages are generated internally, escaping dynamic values is a good habit when using "innerHTML".

Step 10: Draw the Temperature Chart

We can create a lightweight chart with the Canvas API instead of using an external library.

Add this function:

function drawChart() {
const canvas = elements.chart;
const context = chartContext;

const width = canvas.width;
const height = canvas.height;

const padding = {
top: 28,
right: 30,
bottom: 38,
left: 58
};

context.clearRect(0, 0, width, height);

context.fillStyle = "#f8fafc";
context.fillRect(0, 0, width, height);

if (state.history.length < 2) {
return;
}

const temperatures =
state.history.map(
(sample) => sample.temperature
);

const targets =
state.history.map(
(sample) => sample.targetTemperature
);

const allValues = [
...temperatures,
...targets
];

const minimumValue =
Math.floor(Math.min(...allValues) - 10);

const maximumValue =
Math.ceil(Math.max(...allValues) + 10);

drawGrid(
context,
width,
height,
padding,
minimumValue,
maximumValue
);

drawLine({
context,
values: temperatures,
color: "#ea580c",
width,
height,
padding,
minimumValue,
maximumValue
});

drawLine({
context,
values: targets,
color: "#2563eb",
width,
height,
padding,
minimumValue,
maximumValue,
dashed: true
});
}

Now add the helper functions:

function drawGrid(
context,
width,
height,
padding,
minimumValue,
maximumValue
) {
const chartWidth =
width -
padding.left -
padding.right;

const chartHeight =
height -
padding.top -
padding.bottom;

context.strokeStyle = "#dbe4ee";
context.fillStyle = "#64748b";
context.font = "12px Arial";
context.lineWidth = 1;

const horizontalLines = 5;

for (
let index = 0;
index <= horizontalLines;
index += 1
) {
const ratio =
index / horizontalLines;

const y =
  padding.top +
  chartHeight * ratio;

const value =
  maximumValue -
  (
    maximumValue -
    minimumValue
  ) * ratio;

context.beginPath();
context.moveTo(padding.left, y);
context.lineTo(
  padding.left + chartWidth,
  y
);
context.stroke();

context.fillText(
  `${value.toFixed(0)} °C`,
  8,
  y + 4
);

}
}

function drawLine({
context,
values,
color,
width,
height,
padding,
minimumValue,
maximumValue,
dashed = false
}) {
const chartWidth =
width -
padding.left -
padding.right;

const chartHeight =
height -
padding.top -
padding.bottom;

const range =
maximumValue -
minimumValue;

context.beginPath();
context.strokeStyle = color;
context.lineWidth = 3;
context.lineJoin = "round";
context.lineCap = "round";

context.setLineDash(
dashed ? [9, 8] : []
);

values.forEach((value, index) => {
const x =
padding.left +
(
index /
Math.max(values.length - 1, 1)
) *
chartWidth;

const normalizedValue =
  (value - minimumValue) / range;

const y =
  padding.top +
  chartHeight -
  normalizedValue * chartHeight;

if (index === 0) {
  context.moveTo(x, y);
} else {
  context.lineTo(x, y);
}

});

context.stroke();
context.setLineDash([]);
}

Step 11: Run the Monitoring Loop

Add the main application loop:

function monitoringLoop() {
const sample = generateSample();

state.history.push(sample);

if (
state.history.length >
config.maximumHistorySize
) {
state.history.shift();
}

const analysis =
analyzeSample(sample);

updateMetrics(
sample,
analysis.heatingRate
);

updateStatus(analysis.events);
drawChart();
}

Start the loop:

setInterval(
monitoringLoop,
config.sampleIntervalMs
);

monitoringLoop();

Step 12: Add the Simulation Controls

Add the following event listeners:

const modeButtons =
document.querySelectorAll("[data-mode]");

modeButtons.forEach((button) => {
button.addEventListener("click", () => {
state.mode = button.dataset.mode;

state.faultCounters.clear();
state.reportedFaults.clear();

modeButtons.forEach(
  (item) =>
    item.classList.remove("active")
);

button.classList.add("active");

});
});

elements.clearEvents.addEventListener(
"click",
() => {
elements.eventList.innerHTML = <p class="empty-state"> No abnormal condition detected. </p>;
}
);

document
.querySelector('[data-mode="normal"]')
.classList.add("active");

The user can now switch between normal operation and different failure scenarios.

Understanding the Detection Strategy

The detector does not decide whether the heater is healthy based on only one measurement.

It combines several process signals:

Controller command

Electrical current
Temperature
Temperature rate of change
Target temperature
Time

This is more reliable than monitoring temperature alone.

For example, a low temperature does not necessarily indicate a fault. The process may have just started.

However, the combination below is more meaningful:

Heater command = ON
Current = Normal
Heating rate = Very low

This pattern may indicate:

Insufficient heater capacity
Heat loss
Partial heater failure
Incorrect process conditions
Mechanical installation problems

Another important pattern is:

Heater command = OFF
Current = Present
Temperature = Rising

This combination strongly suggests a failed switching device or incorrect control wiring.

Improving Heating-Rate Calculation with Linear Regression

The basic heating-rate function compares the first and last samples in a time window.

A more stable method is linear regression.

Add this alternative function:

function calculateHeatingRateWithRegression(
history
) {
const windowSize =
Math.min(20, history.length);

if (windowSize < 2) {
return 0;
}

const samples =
history.slice(-windowSize);

const startTime =
samples[0].timestamp;

const points = samples.map(
(sample) => ({
x:
(
sample.timestamp -
startTime
) / 60000,
y: sample.temperature
})
);

const count = points.length;

const sumX = points.reduce(
(total, point) =>
total + point.x,
0
);

const sumY = points.reduce(
(total, point) =>
total + point.y,
0
);

const sumXY = points.reduce(
(total, point) =>
total + point.x * point.y,
0
);

const sumXX = points.reduce(
(total, point) =>
total + point.x * point.x,
0
);

const denominator =
count * sumXX -
sumX * sumX;

if (denominator === 0) {
return 0;
}

return (
count * sumXY -
sumX * sumY
) / denominator;
}

The returned slope represents the estimated temperature change per minute.

Linear regression is less sensitive to individual noisy readings.

Connecting the Dashboard to Real Data

The simulation can later be replaced with data from a real system.

Possible data sources include:

WebSocket server
MQTT broker with a web gateway
REST API
Industrial PC
PLC communication gateway
Modbus TCP service
OPC UA gateway
Microcontroller
ESP32
Raspberry Pi
Cloud IoT platform

A WebSocket connection may look like this:

const socket = new WebSocket(
"wss://example.com/heater-data"
);

socket.addEventListener(
"message",
(message) => {
try {
const sample =
JSON.parse(message.data);

  validateIncomingSample(sample);

  state.history.push(sample);

  const analysis =
    analyzeSample(sample);

  updateMetrics(
    sample,
    analysis.heatingRate
  );

  updateStatus(analysis.events);
  drawChart();
} catch (error) {
  console.error(
    "Invalid heater data:",
    error
  );
}

}
);

Incoming data must be validated before it is used.

function validateIncomingSample(sample) {
const requiredNumericFields = [
"timestamp",
"temperature",
"current",
"targetTemperature"
];

for (
const field
of requiredNumericFields
) {
if (
!Number.isFinite(sample[field])
) {
throw new TypeError(
Invalid ${field}
);
}
}

if (
typeof sample.heaterCommand !==
"boolean"
) {
throw new TypeError(
"Invalid heaterCommand"
);
}
}

Additional Faults You Can Detect

The system can be expanded to identify more advanced conditions.

Unbalanced three-phase current

For a three-phase heater, monitor all three line currents:

{
currentL1: 27.3,
currentL2: 26.9,
currentL3: 13.5
}

A large difference may indicate:

One failed heating branch
Loose connection
Damaged fuse
Incorrect star or delta wiring
Supply voltage imbalance

Excessive current

Higher-than-normal current may indicate:

Incorrect supply voltage
Shorted heating element
Incorrect element resistance
Wiring mistake
Wrong star or delta connection

Slow cooling

When the heater is off, abnormal cooling behavior may reveal:

Unexpected external heat
Incorrect sensor position
Process flow problems
Stuck switching device

Repeated short cycling

Frequent switching may indicate:

Incorrect PID tuning
Small control differential
Oversized heater
Poor sensor location
Excessive electrical noise

Increasing heat-up time

The system can compare the current heat-up cycle with previous cycles.

A gradual increase in heating time may indicate:

Element aging
Scale formation
Reduced airflow
Contamination
Thermal insulation damage
Lower supply voltage

Safety Limitations

This project is intended for monitoring and educational use.

It must not directly replace:

Certified safety relays
Independent overtemperature controllers
Thermal fuses
Pressure protection
Level switches
Emergency stop circuits
Circuit breakers
Ground fault protection
Proper electrical design
Qualified engineering review

A browser application may crash, lose network access, or receive delayed data.

Critical heater shutdown functions should be implemented in reliable industrial hardware, such as a PLC, safety controller, or independent temperature limiter.

Possible Next Improvements

This application can be developed further by adding:

Real-time MQTT data
Three-phase current monitoring
Alarm acknowledgment
User authentication
Historical event storage
CSV data export
PDF maintenance reports
Configurable thresholds
Multiple heater zones
Equipment-specific profiles
Notification services
Predictive maintenance scoring
Statistical process control
Offline PWA support
TypeScript type safety
Automated unit tests
Database integration

You could also calculate a simple heater health score:

Heater health =
100

Current deviation penalty
Heating-rate penalty
Overshoot penalty
Sensor stability penalty

The score could help maintenance teams compare multiple heating zones in one dashboard.

Final Thoughts

JavaScript can be used for more than websites and user interfaces.

With the right process data, it can also support industrial monitoring, diagnostics, maintenance planning, and engineering calculations.

This rule-based anomaly detector combines electrical current, temperature, controller commands, and heating rate to identify common heater problems.

Although it is not a replacement for industrial safety hardware, it can become a useful maintenance and visualization tool when connected to real equipment data.

I work on the design and manufacturing of industrial electric heaters, including flanged heaters, tubular heating elements, cartridge heaters, immersion heaters, ceramic heaters, and electric fan heaters at Techno Design.

More information about industrial heating systems:

https://technodesignn.ir

Suggested DEV Community Tags

javascript

iot

webdev

engineering

Build an Industrial Heater Current Calculator with JavaScript

ashkan hoseinpoor — Tue, 28 Jul 2026 20:26:10 +0000

Build a Single-Phase and Three-Phase Heater Current Calculator with JavaScript

Industrial electric heaters are commonly designed for either single-phase or three-phase electrical systems.

Before choosing a circuit breaker, contactor, cable, or control panel, engineers need an initial estimate of the heater's operating current.

In this tutorial, we will build a responsive electrical current calculator using HTML, CSS, and JavaScript.

The calculator will support:

Single-phase resistive heaters
Three-phase resistive heaters
Different supply voltages
Power values in watts or kilowatts
Custom power factor values
Input validation
Automatic resistance calculation

«This calculator provides an initial engineering estimate. Final electrical protection and cable sizing must follow applicable standards and actual installation conditions.»

Electrical Formulas

For a single-phase electrical load:

P = V × I × PF

Therefore:

I = P ÷ (V × PF)

For a balanced three-phase electrical load:

P = √3 × V × I × PF

Therefore:

I = P ÷ (√3 × V × PF)

Where:

"P" is active power in watts
"V" is supply voltage in volts
"I" is current in amperes
"PF" is the power factor
"√3" is approximately "1.732"

Industrial resistance heaters are almost purely resistive loads, so their power factor is typically close to "1".

What We Are Building

The user will select:

Electrical phase
Heater power
Power unit
Supply voltage
Power factor

The calculator will display:

Estimated operating current
Equivalent heater resistance
Applied calculation formula

Project Structure

Create the following files:

heater-current-calculator/
├── index.html
├── style.css
└── script.js

Step 1: Create the HTML

Add the following code to "index.html":

<!DOCTYPE html>

Industrial Heater Current Calculator

Electrical Engineering Tool

  <h1>Industrial Heater Current Calculator</h1>

  <p>
    Estimate the operating current and electrical resistance
    of a single-phase or three-phase electric heater.
  </p>
</header>

<form id="calculator-form">
  <div class="field">
    <label for="phase">Electrical system</label>

    <select id="phase">
      <option value="single">Single phase</option>
      <option value="three">Three phase</option>
    </select>
  </div>

  <div class="power-row">
    <div class="field">
      <label for="power">Heater power</label>

      <input
        type="number"
        id="power"
        min="0.01"
        step="0.01"
        placeholder="Example: 18"
        required
      >
    </div>

    <div class="field unit-field">
      <label for="power-unit">Unit</label>

      <select id="power-unit">
        <option value="kw">kW</option>
        <option value="w">W</option>
      </select>
    </div>
  </div>

  <div class="field">
    <label for="voltage">Supply voltage</label>

    <input
      type="number"
      id="voltage"
      min="1"
      step="1"
      value="220"
      required
    >
  </div>

  <div class="voltage-buttons">
    <button type="button" data-voltage="220">
      220 V
    </button>

    <button type="button" data-voltage="230">
      230 V
    </button>

    <button type="button" data-voltage="380">
      380 V
    </button>

    <button type="button" data-voltage="400">
      400 V
    </button>
  </div>

  <div class="field">
    <label for="power-factor">Power factor</label>

    <input
      type="number"
      id="power-factor"
      min="0.01"
      max="1"
      step="0.01"
      value="1"
      required
    >

    <small>
      For a standard resistance heater, use a value close to 1.
    </small>
  </div>

  <button class="calculate-button" type="submit">
    Calculate Current
  </button>
</form>

<section
  id="result"
  class="result"
  aria-live="polite"
></section>

Step 2: Style the Calculator

Add the following code to "style.css":

{ box-sizing: border-box; }

:root {
font-family: Arial, Helvetica, sans-serif;
color: #1f2937;
background: #eef1f5;
}

body {
min-height: 100vh;
margin: 0;
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
}

.calculator-card {
width: 100%;
max-width: 620px;
padding: 36px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 16px 45px rgba(15, 23, 42, 0.1);
}

header {
margin-bottom: 28px;
}

.label {
display: inline-block;
margin-bottom: 10px;
color: #d97706;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}

h1 {
margin: 0 0 12px;
font-size: clamp(28px, 5vw, 40px);
line-height: 1.15;
}

header p {
margin: 0;
color: #64748b;
line-height: 1.7;
}

.field {
margin-bottom: 20px;
}

.power-row {
display: grid;
grid-template-columns: 1fr 120px;
gap: 14px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: 700;
}

input,
select {
width: 100%;
min-height: 50px;
padding: 10px 14px;
border: 1px solid #cbd5e1;
border-radius: 10px;
background: #ffffff;
color: #1f2937;
font-size: 16px;
}

input:focus,
select:focus {
outline: 3px solid rgba(245, 158, 11, 0.2);
border-color: #f59e0b;
}

small {
display: block;
margin-top: 8px;
color: #64748b;
line-height: 1.5;
}

.voltage-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: -8px;
margin-bottom: 22px;
}

.voltage-buttons button {
min-height: 40px;
border: 1px solid #dbe2ea;
border-radius: 8px;
background: #f8fafc;
color: #334155;
cursor: pointer;
}

.voltage-buttons button:hover {
border-color: #f59e0b;
background: #fff7ed;
}

.calculate-button {
width: 100%;
min-height: 54px;
padding: 12px 20px;
border: 0;
border-radius: 10px;
background: #f59e0b;
color: #ffffff;
font-size: 17px;
font-weight: 700;
cursor: pointer;
}

.calculate-button:hover {
background: #d97706;
}

.result {
display: none;
margin-top: 26px;
padding: 22px;
border: 1px solid #fed7aa;
border-radius: 12px;
background: #fff7ed;
}

.result.visible {
display: block;
}

.result.error {
border-color: #fecaca;
background: #fef2f2;
color: #b91c1c;
}

.result h2 {
margin-top: 0;
font-size: 20px;
}

.result-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.result-item {
padding: 14px;
border-radius: 10px;
background: #ffffff;
}

.result-item span {
display: block;
margin-bottom: 6px;
color: #64748b;
font-size: 14px;
}

.result-item strong {
font-size: 22px;
}

.formula {
margin-bottom: 0;
padding-top: 14px;
border-top: 1px solid #fed7aa;
font-family: monospace;
line-height: 1.7;
}

@media (max-width: 520px) {
body {
padding: 14px;
}

.calculator-card {
padding: 24px 18px;
}

.power-row {
grid-template-columns: 1fr 90px;
}

.voltage-buttons {
grid-template-columns: repeat(2, 1fr);
}

.result-grid {
grid-template-columns: 1fr;
}
}

The interface is responsive, so it can be used on both desktop and mobile devices.

Step 3: Add the JavaScript Logic

Add the following code to "script.js":

const form = document.getElementById("calculator-form");
const phaseInput = document.getElementById("phase");
const powerInput = document.getElementById("power");
const powerUnitInput = document.getElementById("power-unit");
const voltageInput = document.getElementById("voltage");
const powerFactorInput = document.getElementById("power-factor");
const result = document.getElementById("result");

const voltageButtons = document.querySelectorAll(
"[data-voltage]"
);

const SQRT_THREE = Math.sqrt(3);

voltageButtons.forEach((button) => {
button.addEventListener("click", () => {
voltageInput.value = button.dataset.voltage;
});
});

phaseInput.addEventListener("change", () => {
if (phaseInput.value === "single") {
voltageInput.value = 220;
} else {
voltageInput.value = 380;
}
});

form.addEventListener("submit", (event) => {
event.preventDefault();

const phase = phaseInput.value;
const enteredPower = Number(powerInput.value);
const powerUnit = powerUnitInput.value;
const voltage = Number(voltageInput.value);
const powerFactor = Number(powerFactorInput.value);

clearResult();

if (
!Number.isFinite(enteredPower) ||
!Number.isFinite(voltage) ||
!Number.isFinite(powerFactor)
) {
showError("Please enter valid numeric values.");
return;
}

if (enteredPower <= 0) {
showError("Heater power must be greater than zero.");
return;
}

if (voltage <= 0) {
showError("Supply voltage must be greater than zero.");
return;
}

if (powerFactor <= 0 || powerFactor > 1) {
showError("Power factor must be between 0 and 1.");
return;
}

const powerInWatts =
powerUnit === "kw"
? enteredPower * 1000
: enteredPower;

const current =
phase === "single"
? calculateSinglePhaseCurrent(
powerInWatts,
voltage,
powerFactor
)
: calculateThreePhaseCurrent(
powerInWatts,
voltage,
powerFactor
);

const resistance =
phase === "single"
? calculateSinglePhaseResistance(
voltage,
powerInWatts
)
: calculateThreePhaseEquivalentResistance(
voltage,
powerInWatts
);

showResult({
phase,
powerInWatts,
voltage,
powerFactor,
current,
resistance
});
});

function calculateSinglePhaseCurrent(
power,
voltage,
powerFactor
) {
return power / (voltage * powerFactor);
}

function calculateThreePhaseCurrent(
power,
voltage,
powerFactor
) {
return power / (
SQRT_THREE *
voltage *
powerFactor
);
}

function calculateSinglePhaseResistance(
voltage,
power
) {
return Math.pow(voltage, 2) / power;
}

function calculateThreePhaseEquivalentResistance(
voltage,
power
) {
return Math.pow(voltage, 2) / power;
}

function showResult({
phase,
powerInWatts,
voltage,
powerFactor,
current,
resistance
}) {
const phaseLabel =
phase === "single"
? "Single phase"
: "Three phase";

const formula =
phase === "single"
? "I = P ÷ (V × PF)"
: "I = P ÷ (√3 × V × PF)";

result.innerHTML = `

${phaseLabel} calculation

<div class="result-grid">
  <div class="result-item">
    <span>Operating current</span>
    <strong>${current.toFixed(2)} A</strong>
  </div>

  <div class="result-item">
    <span>Equivalent resistance</span>
    <strong>${resistance.toFixed(2)} Ω</strong>
  </div>

  <div class="result-item">
    <span>Heater power</span>
    <strong>
      ${(powerInWatts / 1000).toFixed(2)} kW
    </strong>
  </div>

  <div class="result-item">
    <span>Supply voltage</span>
    <strong>${voltage.toFixed(0)} V</strong>
  </div>
</div>

<p class="formula">
  ${formula}<br>
  Power factor: ${powerFactor.toFixed(2)}
</p>

result.classList.add("visible");
}

function showError(message) {
result.textContent = message;
result.classList.add("visible", "error");
}

function clearResult() {
result.className = "result";
result.innerHTML = "";
}

How the Calculation Works

The calculator first converts kilowatts into watts:

const powerInWatts =
powerUnit === "kw"
? enteredPower * 1000
: enteredPower;

It then checks whether the user selected a single-phase or three-phase system.

For single-phase loads:

return power / (voltage * powerFactor);

For three-phase loads:

return power / (
Math.sqrt(3) *
voltage *
powerFactor
);

The application also performs validation to prevent calculations with invalid values.

Example 1: Single-Phase Heater

Suppose we have the following heater:

Power: 3,000 W
Voltage: 220 V
Power factor: 1

The current is:

I = 3000 ÷ 220
I = 13.64 A

Therefore, the heater has an estimated operating current of approximately:

13.64 A

The calculated value is the heater operating current, not necessarily the final circuit breaker rating.

Example 2: Three-Phase Heater

Consider an industrial three-phase heater with the following specifications:

Power: 18 kW
Voltage: 380 V
Power factor: 1

The current is:

I = 18000 ÷ (1.732 × 380)
I = 27.35 A

Each line conductor carries approximately:

27.35 A

This is one reason why three-phase power is commonly used for high-power industrial heaters.

Why Three-Phase Power Is Used

Three-phase electrical systems offer several advantages for industrial heating applications:

Lower line current for the same total power
Better load distribution
Smaller conductor requirements in many installations
Easier control of high-power heating systems
Better compatibility with industrial electrical infrastructure

For example, an 18 kW heater connected to a 220 V single-phase supply would draw approximately:

18000 ÷ 220 = 81.82 A

The same power connected to a 380 V three-phase supply draws approximately:

18000 ÷ (1.732 × 380) = 27.35 A

The comparison demonstrates why high-capacity industrial heaters are frequently designed for three-phase operation.

Star and Delta Connections

Three-phase heating elements may be connected in star or delta configurations.

Star Connection

In a star connection:

Vphase = Vline ÷ √3

At a line voltage of 380 V:

Vphase = 380 ÷ 1.732
Vphase ≈ 219.4 V

This means each heating element receives approximately 220 V.

A star connection is therefore useful when the individual heater elements are rated for approximately 220 V but the available three-phase line voltage is 380 V.

Delta Connection

In a delta connection:

Vphase = Vline

With a 380 V supply, each heating element receives the full 380 V.

The selected connection must match the voltage and resistance rating of each heating element.

Connecting a heating element to the wrong voltage can dramatically increase its power and may cause rapid failure.

Power and Resistance Relationship

For a resistive heater:

P = V² ÷ R

Therefore:

R = V² ÷ P

For a 3 kW single-phase heater operating at 220 V:

R = 220² ÷ 3000
R = 16.13 Ω

The approximate heater resistance is:

16.13 Ω

Actual measured resistance may differ slightly due to manufacturing tolerance and temperature.

The electrical resistance of many heating alloys changes as the element temperature increases.

Important Safety Considerations

A current calculator is only the first step in designing an industrial heater circuit.

A complete design may also require:

Cable current-carrying capacity
Ambient-temperature correction
Cable installation method
Circuit length and voltage drop
Circuit breaker characteristics
Contactor utilization category
Solid-state relay cooling
Short-circuit protection
Earth leakage protection
Overtemperature protection
Phase failure protection
Grounding and bonding
Control-panel ventilation
Local electrical regulations

The selected circuit breaker should not be based only on the displayed operating current.

The complete installation conditions must be reviewed by a qualified electrical professional.

Possible Improvements

This calculator can be expanded with additional features:

Star and delta connection selection
Current per heating element
Resistance per phase
Circuit breaker suggestions
Cable cross-section estimates
Contactor current selection
Solid-state relay sizing
Energy consumption calculations
Estimated operating costs
Celsius and Fahrenheit support
Exporting results as PDF
Saving calculations in local storage
Creating a printable engineering report

You could also rebuild the application using React, Vue, TypeScript, or another frontend framework.

Final Thoughts

This project shows how basic electrical engineering formulas can be transformed into a practical browser-based tool.

JavaScript is not limited to traditional web applications. It can also help engineers, technicians, manufacturers, and customers perform fast initial calculations.

I work on the design and manufacturing of industrial electric heaters, including flanged heaters, tubular heating elements, cartridge heaters, immersion heaters, and electric fan heaters at Techno Design.

More information about industrial heating systems is available at:

https://technodesignn.ir

Suggested DEV Community tags:

javascript

webdev

engineering

beginners

Industrial Heater Sizing Calculator with JavaScript

ashkan hoseinpoor — Tue, 28 Jul 2026 20:21:59 +0000

How to Build an Industrial Electric Heater Sizing Calculator with JavaScript

Selecting the correct power for an industrial electric heater is not always straightforward.

If the heater is too small, the system may take too long to reach the desired temperature. If it is too powerful, it may increase energy consumption, create temperature-control problems, or damage the equipment.

In this tutorial, we will build a simple industrial heater sizing calculator using HTML, CSS, and JavaScript.

The calculator estimates the electrical power required to heat water from an initial temperature to a target temperature within a specified time.

What We Are Building

The user will enter:

Water volume in liters
Initial temperature
Target temperature
Heating time in minutes
Safety factor

The calculator will return the estimated heater power in kilowatts.

The Basic Heat Calculation Formula

The energy required to heat a material can be calculated using:

Q = m × c × ΔT

Where:

"Q" is the required heat energy
"m" is the mass of the material
"c" is the specific heat capacity
"ΔT" is the temperature difference

For water:

c = 4.186 kJ/kg°C

Because one liter of water has a mass of approximately one kilogram, the water volume in liters can be used as an approximate mass value in kilograms.

To calculate the required power:

Power = Energy / Time

The final formula becomes:

Power in kW =
Mass × Specific Heat × Temperature Difference
÷ Heating Time in Seconds

A safety factor is usually added to compensate for heat losses through the tank, pipes, surrounding air, and other parts of the system.

Project Structure

Create three files:

heater-calculator/
├── index.html
├── style.css
└── script.js

Step 1: Create the HTML

Add the following code to "index.html":

<!DOCTYPE html>

<meta
name="viewport"
content="width=device-width, initial-scale=1.0"

Industrial Heater Sizing Calculator

<p class="description">
  Estimate the electrical power required to heat water
  within a specified period.
</p>

<form id="heater-form">
  <div class="form-group">
    <label for="volume">Water volume in liters</label>

    <input
      type="number"
      id="volume"
      min="0.1"
      step="0.1"
      required
    >
  </div>

  <div class="form-group">
    <label for="initial-temperature">
      Initial temperature in °C
    </label>

    <input
      type="number"
      id="initial-temperature"
      step="0.1"
      required
    >
  </div>

  <div class="form-group">
    <label for="target-temperature">
      Target temperature in °C
    </label>

    <input
      type="number"
      id="target-temperature"
      step="0.1"
      required
    >
  </div>

  <div class="form-group">
    <label for="heating-time">
      Heating time in minutes
    </label>

    <input
      type="number"
      id="heating-time"
      min="1"
      step="1"
      required
    >
  </div>

  <div class="form-group">
    <label for="safety-factor">
      Safety factor
    </label>

    <select id="safety-factor">
      <option value="1">No safety factor</option>
      <option value="1.1">10%</option>
      <option value="1.15" selected>15%</option>
      <option value="1.2">20%</option>
      <option value="1.25">25%</option>
    </select>
  </div>

  <button type="submit">
    Calculate Heater Power
  </button>
</form>

<section
  id="result"
  class="result"
  aria-live="polite"
></section>

The form uses numeric inputs so users can enter the system conditions.

The "aria-live" attribute helps screen readers announce the calculated result when it changes.

Step 2: Add the CSS

Add the following styles to "style.css":

{ box-sizing: border-box; }

body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
font-family: Arial, sans-serif;
background: #f1f3f5;
color: #212529;
}

.calculator {
width: 100%;
max-width: 560px;
padding: 32px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

h1 {
margin-top: 0;
margin-bottom: 12px;
font-size: 30px;
}

.description {
margin-bottom: 28px;
color: #5f6368;
line-height: 1.7;
}

.form-group {
margin-bottom: 18px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: 700;
}

input,
select,
button {
width: 100%;
min-height: 48px;
border-radius: 8px;
font-size: 16px;
}

input,
select {
padding: 10px 12px;
border: 1px solid #ced4da;
background: #ffffff;
}

input:focus,
select:focus {
outline: 2px solid #ff8a00;
border-color: transparent;
}

button {
margin-top: 8px;
padding: 12px 18px;
border: 0;
background: #ff8a00;
color: #ffffff;
font-weight: 700;
cursor: pointer;
}

button:hover {
opacity: 0.9;
}

.result {
display: none;
margin-top: 24px;
padding: 20px;
border-radius: 10px;
background: #fff4e6;
line-height: 1.7;
}

.result.visible {
display: block;
}

.result.error {
background: #ffe3e3;
color: #c92a2a;
}

This layout is responsive and works well on both desktop and mobile screens.

Step 3: Write the JavaScript Calculation

Add the following code to "script.js":

const form = document.getElementById("heater-form");
const result = document.getElementById("result");

const WATER_SPECIFIC_HEAT = 4.186;

form.addEventListener("submit", function (event) {
event.preventDefault();

const volume = Number(
document.getElementById("volume").value
);

const initialTemperature = Number(
document.getElementById("initial-temperature").value
);

const targetTemperature = Number(
document.getElementById("target-temperature").value
);

const heatingTimeMinutes = Number(
document.getElementById("heating-time").value
);

const safetyFactor = Number(
document.getElementById("safety-factor").value
);

result.classList.remove("error", "visible");

if (
!Number.isFinite(volume) ||
!Number.isFinite(initialTemperature) ||
!Number.isFinite(targetTemperature) ||
!Number.isFinite(heatingTimeMinutes) ||
!Number.isFinite(safetyFactor)
) {
showError("Please enter valid numeric values.");
return;
}

if (volume <= 0 || heatingTimeMinutes <= 0) {
showError(
"Water volume and heating time must be greater than zero."
);
return;
}

if (targetTemperature <= initialTemperature) {
showError(
"The target temperature must be higher than the initial temperature."
);
return;
}

const waterMass = volume;

const temperatureDifference =
targetTemperature - initialTemperature;

const heatingTimeSeconds =
heatingTimeMinutes * 60;

const requiredEnergy =
waterMass *
WATER_SPECIFIC_HEAT *
temperatureDifference;

const theoreticalPower =
requiredEnergy / heatingTimeSeconds;

const recommendedPower =
theoreticalPower * safetyFactor;

showResult({
temperatureDifference,
theoreticalPower,
recommendedPower
});
});

function showResult({
temperatureDifference,
theoreticalPower,
recommendedPower
}) {
result.innerHTML = `
Calculation result

<p>
  Temperature increase:
  ${temperatureDifference.toFixed(1)} °C
</p>

<p>
  Theoretical heater power:
  ${theoreticalPower.toFixed(2)} kW
</p>

<p>
  Recommended heater power:
  <strong>${recommendedPower.toFixed(2)} kW</strong>
</p>

result.classList.add("visible");
}

function showError(message) {
result.textContent = message;
result.classList.add("visible", "error");
}

Understanding the JavaScript

First, we define the specific heat capacity of water:

const WATER_SPECIFIC_HEAT = 4.186;

The value is expressed in kilojoules per kilogram per degree Celsius.

Next, the script reads the form values and converts them into numbers.

const volume = Number(
document.getElementById("volume").value
);

We then calculate the temperature difference:

const temperatureDifference =
targetTemperature - initialTemperature;

The heating time is converted from minutes to seconds:

const heatingTimeSeconds =
heatingTimeMinutes * 60;

The required heat energy is calculated using:

const requiredEnergy =
waterMass *
WATER_SPECIFIC_HEAT *
temperatureDifference;

Because the energy is expressed in kilojoules and time is expressed in seconds, dividing the two gives us kilowatts:

const theoreticalPower =
requiredEnergy / heatingTimeSeconds;

Finally, we apply the selected safety factor:

const recommendedPower =
theoreticalPower * safetyFactor;

Example Calculation

Suppose we need to heat 500 liters of water:

Initial temperature: 20°C
Target temperature: 70°C
Heating time: 120 minutes
Safety factor: 15%

The temperature difference is:

70 - 20 = 50°C

The theoretical heater power is approximately:

500 × 4.186 × 50 ÷ 7200
= 14.53 kW

After adding a 15% safety factor:

14.53 × 1.15
= 16.71 kW

Therefore, the estimated required heater power is approximately:

16.7 kW

Depending on available standard heater sizes, a designer may select an 18 kW heater and use an appropriate temperature-control system.

Important Engineering Limitations

This calculator provides an initial estimate. It does not replace a complete thermal engineering calculation.

Real industrial systems may also require consideration of:

Tank surface heat losses
Insulation thickness and material
Ambient temperature
Pipe and pump heat losses
Water circulation
Heater surface watt density
Electrical supply voltage
Single-phase or three-phase power
Control method
Maximum allowable sheath temperature
Required heating-element material

For example, heating water in an insulated stainless-steel tank is different from heating oil in an open steel container.

Each liquid has a different specific heat capacity, viscosity, boiling point, and maximum recommended watt density.

Extending the Calculator

This project can be improved by adding:

Support for oil, air, and other materials
Automatic current calculation
Single-phase and three-phase options
Voltage selection
Heater resistance calculation
Energy consumption estimation
Estimated operating cost
Heat-loss calculations
Unit conversion between Celsius and Fahrenheit

For a three-phase resistive heater, the approximate current can be calculated using:

Current =
Power ÷ (√3 × Voltage)

For example, the current of an 18 kW three-phase heater operating at 380 volts is approximately:

18,000 ÷ (1.732 × 380)
= 27.35 A

The final cable size, contactor, circuit breaker, and protection system must be selected according to applicable electrical standards and actual installation conditions.

Final Thoughts

This project demonstrates how JavaScript can be used to solve a real industrial engineering problem.

Even a simple browser-based calculator can help engineers and customers make a better initial estimate before selecting an electric heater.

However, the final heater design should always consider the material being heated, operating temperature, heater geometry, watt density, electrical supply, control system, and installation environment.

I work on the design and manufacturing of industrial electric heaters, flanged heating elements, tubular heaters, cartridge heaters, and electric fan heaters at Techno Design.

You can learn more about industrial heating systems at:

https://technodesignn.ir

Suggested DEV Community tags: