How to create a temperature converter with HTML and JavaScript

Hello Friends, In this article we will discuss How to create a temperature converter with HTML and JavaScript. If you want to create a temperature converter with HTML and JavaScript. Then you are in the right place.

Create a Temperature Converter

Create an input element that can change a value from one temperature measurement to another.

Convert from Fahrenheit to other Measurements

  • Convert from Fahrenheit to Celsius- ℃=(℉-32)/1.8
  • Convert from Fahrenheit to Kelvin- K=((℉-32)/1.8)+273.15

Convert from Celsius to other Measurements

  • Convert from Celsius to Fahrenheit- ℉=(℃*1.8)+32
  • Convert from Celsius to Kelvin- K=℃+273.15

Convert from Kelvin to other Measurements

  • Convert from Kelvin to Fahrenheit- ℉=((K-273.15)*1.8)+32
  • Convert from Kelvin to Celsius- ℃=K-273.15

Temperature converter with HTML and JavaScript

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>

JavaScript:

function temperatureConverter(valNum) {
valNum = parseFloat(valNum);
document.getElementById(“outputCelsius”).innerHTML = (valNum-32) / 1.8;
}

How to create a temperature converter with HTML and JavaScript

<!DOCTYPE html>
<html>
<title>Fahrenheit to Celcius Temperature Converter</title>
<body>

<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Celsius:</p>

<p>
<label>Fahrenheit</label>
<input id=”inputFahrenheit” type=”number” placeholder=”Fahrenheit” oninput=”temperatureConverter(this.value)” onchange=”temperatureConverter(this.value)”>
</p>
<p>Celcius: <span id=”outputCelcius”></span></p>

<script>
function temperatureConverter(valNum) {
valNum = parseFloat(valNum);
document.getElementById(“outputCelcius”).innerHTML=(valNum-32)/1.8;
}
</script>

</body>
</html>

Read More:

Share this post if you found helpful!