Build a temperature converter that converts between Celsius, Fahrenheit, and Kelvin in real time.

Temperature Converter

Problem

Build a temperature converter where the user types a value in any of the three fields — Celsius, Fahrenheit, or Kelvin — and the other two update instantly.

User types 100 in Celsius
Fahrenheit: 212
Kelvin: 373.15

User types 32 in Fahrenheit
Celsius: 0
Kelvin: 273.15

User types 0 in Kelvin
Celsius: -273.15
Fahrenheit: -459.67

User clears the input
Other fields: cleared too

Logic

Select all three input fields
Listen for the input event on each field
When one field changes — read its value
Convert to the other two units using the formulas
Update the other two fields
If the input is cleared — clear all fields

Formulas

Celsius to Fahrenheit  →  (C × 9/5) + 32
Celsius to Kelvin      →  C + 273.15

Fahrenheit to Celsius  →  (F − 32) × 5/9
Fahrenheit to Kelvin   →  (F − 32) × 5/9 + 273.15

Kelvin to Celsius      →  K − 273.15
Kelvin to Fahrenheit   →  (K − 273.15) × 9/5 + 32

Flow

HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Temperature Converter</title>
    <style>
      body {
        font-family: sans-serif;
        max-width: 400px;
        margin: 60px auto;
        padding: 0 20px;
      }

      h1 {
        margin-bottom: 24px;
      }

      /* each converter row */
      .field {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }

      .field label {
        width: 100px;
        font-weight: 500;
        font-size: 1rem;
      }

      .field input {
        flex: 1;
        padding: 10px;
        font-size: 1rem;
        border: 2px solid #ccc;
        border-radius: 8px;
        outline: none;
      }

      /* highlight the field being typed in */
      .field input:focus {
        border-color: #555;
      }

      .field span {
        font-size: 1.1rem;
        color: #555;
        width: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Temperature Converter</h1>

    <!-- Celsius input -->
    <div class="field">
      <label for="celsius">Celsius</label>
      <input type="number" id="celsius" placeholder="°C" />
      <span>°C</span>
    </div>

    <!-- Fahrenheit input -->
    <div class="field">
      <label for="fahrenheit">Fahrenheit</label>
      <input type="number" id="fahrenheit" placeholder="°F" />
      <span>°F</span>
    </div>

    <!-- Kelvin input -->
    <div class="field">
      <label for="kelvin">Kelvin</label>
      <input type="number" id="kelvin" placeholder="K" />
      <span>K</span>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Solution

// Step 1 — select all three input fields
const celsiusInput = document.querySelector("#celsius");
const fahrenheitInput = document.querySelector("#fahrenheit");
const kelvinInput = document.querySelector("#kelvin");

// Step 2 — helper to round to 2 decimal places
// avoids showing long floating point numbers like 212.00000000001
function round(value) {
  return Math.round(value * 100) / 100;
}

// Step 3 — attach input event to each field
// each listener only handles conversions from its own unit
celsiusInput.addEventListener("input", onCelsiusInput);
fahrenheitInput.addEventListener("input", onFahrenheitInput);
kelvinInput.addEventListener("input", onKelvinInput);

// Step 4 — Celsius handler
function onCelsiusInput() {
  const value = celsiusInput.value;

  // if field is cleared — clear the other two
  if (value === "") {
    fahrenheitInput.value = "";
    kelvinInput.value = "";
    return;
  }

  // parse string to number
  const celsius = parseFloat(value);

  // convert and update the other fields
  fahrenheitInput.value = round((celsius * 9) / 5 + 32);
  kelvinInput.value = round(celsius + 273.15);
}

// Step 5 — Fahrenheit handler
function onFahrenheitInput() {
  const value = fahrenheitInput.value;

  if (value === "") {
    celsiusInput.value = "";
    kelvinInput.value = "";
    return;
  }

  const fahrenheit = parseFloat(value);

  // convert Fahrenheit to Celsius first — then Celsius to Kelvin
  celsiusInput.value = round(((fahrenheit - 32) * 5) / 9);
  kelvinInput.value = round(((fahrenheit - 32) * 5) / 9 + 273.15);
}

// Step 6 — Kelvin handler
function onKelvinInput() {
  const value = kelvinInput.value;

  if (value === "") {
    celsiusInput.value = "";
    fahrenheitInput.value = "";
    return;
  }

  const kelvin = parseFloat(value);

  // convert Kelvin to Celsius first — then Celsius to Fahrenheit
  const celsius = kelvin - 273.15;
  celsiusInput.value = round(celsius);
  fahrenheitInput.value = round((celsius * 9) / 5 + 32);
}

Code Execution

Trace through typing 100 in Celsius:

Step	Code	Result
Read value	`celsiusInput.value`	`"100"`
Parse	`parseFloat("100")`	`100`
To Fahrenheit	`(100 × 9/5) + 32`	`212`
To Kelvin	`100 + 273.15`	`373.15`
Update fields	fahrenheit = `212`, kelvin = `373.15`	done

Trace through typing 32 in Fahrenheit:

Step	Code	Result
Read value	`fahrenheitInput.value`	`"32"`
Parse	`parseFloat("32")`	`32`
To Celsius	`(32 - 32) × 5/9`	`0`
To Kelvin	`0 + 273.15`	`273.15`
Update fields	celsius = `0`, kelvin = `273.15`	done

Trace through clearing the Celsius field:

Step	Code	Result
Read value	`celsiusInput.value`	`""`
Check empty	`value === ""`	`true`
Clear others	fahrenheit = `""`, kelvin = `""`	all cleared

Output

Type 100 in Celsius     → Fahrenheit: 212      Kelvin: 373.15
Type 32 in Fahrenheit   → Celsius: 0           Kelvin: 273.15
Type 0 in Kelvin        → Celsius: -273.15     Fahrenheit: -459.67
Clear any field         → All fields cleared

Temperature Converter

On this page