logo
Home Courses Blog

Simple Javascript Temperature Converter

___________________________

Introduction

Temperature is a quantitative description of the state of hotness of matter. Human temperature receptors in the skin can give an idea of whether something is hot or cold, but cannot be relied on to provide accurate measurement. A thermometer is an instrument used for measuring temperature and are needed for accurate measurement.

The temperature of a body depends on the scale adopted. There exists many temperature scales including but not limited to the Celsius, Kelvin and Fahrenheit scale. The following equations relates each temperature scales to another.


Convert from Celsius scale to Kelvin and Fahrenheit scale

Convert from Celsius to Kelvin

K = °C + 273.15

Convert from Celsius to Fahrenheit

°F = (°C x 1.8) + 32


Convert from Kelvin scale to Celsius and Fahrenheit scale

Convert from Kelvin to Celsius

°C = K-273.15

Convert from Kelvin to Fahrenheit

°F = ((K-273.15) x 1.8)+32


Convert from Fahrenheit to celsius and Kelvin scale

Convert from Fahrenheit to Celsius

°C = (°F - 32)/1.8

Convert from Kelvin to Fahrenheit

K = ((°F - 32)/1.8) + 273.15


Code

Creating the form in HTML

The form consists of three number inputs and labels for the various scales.



	
	<form role="form" class="ccc">
  <div class="form-group">
  <div class="form-group">
    <label for="tempCelsius">Celsius</label>
    <input type="number" class="form-control" id="tempCelsius" placeholder="Celsius" 
    oninput="converter(this.id,this.value)" onchange="converter(this.id,this.value)">
  </div>
    <div class="form-group">
    <label for="tempKelvin">Kelvin</label>
    <input type="number" class="form-control" id="tempKelvin" placeholder="Kelvin" 
    oninput="converter(this.id,this.value)" onchange="converter(this.id,this.value)">
  </div>
    <label for="tempFahrenheit">Fahrenheit</label>
    <input type="number" class="form-control" id="tempFahrenheit" placeholder="Fahrenheit" 
    oninput="converter(this.id,this.value)" onchange="converter(this.id,this.value)">
  </div>
</form>

Inserting Javascript

Base on the formulas stated above, we can create a Javascript function to do the conversions in Javascript.



function converter(id,Num) {
  Num = parseFloat(Num);
  var tempFahrenheit = document.getElementById("tempFahrenheit");
  var tempCelsius = document.getElementById("tempCelsius");
  var tempKelvin = document.getElementById("tempKelvin");

  if (id=="tempCelsius") {
    tempFahrenheit.value=((Num*1.8)+32).toFixed(2);
    tempKelvin.value=((Num)+273.15).toFixed(2);
  }
  if (id=="tempKelvin") {
    tempFahrenheit.value=(((Num-273.15)*1.8)+32).toFixed(2);
    tempCelsius.value=((Num)-273.15).toFixed(2);
  }
  if (id=="tempFahrenheit") {
    tempCelsius.value=((Num-32)/1.8).toFixed(2);
    tempKelvin.value=(((Num-32)/1.8)+273.15).toFixed(2);
  }
}  


Demo

You can try the converter app below. Simply insert the temperature in any of the input areas corresponding to a particular temperature scale to convert it to other temperature scale.