How to Create: Temperature Converter

Learn how to use HTML and JavaScript to create a temperature converter.

Temperature Converter

Type a value in any field to convert between temperature units:

Create a Temperature Converter

Create an input element that can convert one temperature unit to another.

Step 1 - Add HTML:

<p>
  <label>Fahrenheit</label>
  <input id="inputFahrenheit" type="number" placeholder="Fahrenheit"
  oninput="temperatureConverter(this.value)"
  onchange="temperatureConverter(this.value)"
</p>
<p>Celsius: <span id="outputCelsius"></span></p>

Step 2 - Add JavaScript:

Fahrenheit to Celsius Conversion:

/* Convert value from Fahrenheit to Celsius when input field receives input */
function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputCelsius").innerHTML = (valNum - 32) / 1.8;
}

Try it yourself

Convert Fahrenheit to other units of measurement

The following table shows how to convert Fahrenheit to other temperature units:

Description Formula Example
Convert Fahrenheit to Celsius ℃ = (℉ - 32) / 1.8 Try It
Convert Fahrenheit to Kelvin K = ((℉ - 32) / 1.8) + 273.15 Try It

Convert Celsius to other units of measurement

The following table shows how to convert Celsius to other temperature units:

Description Formula Example
Convert Celsius to Fahrenheit ℉ = (℃ * 1.8) + 32 Try It
Convert Celsius to Kelvin K = ℃ + 273.15 Try It

Convert Kelvin to other units of measurement

The following table shows how to convert Kelvin to other temperature units:

Description Formula Example
Convert Kelvin to Fahrenheit ℉=((K-273.15)*1.8)+32 Try It
Convert Kelvin to Celsius ℃=K-273.15 Try It