Open in App
Not now

Temperature Converter using HTML CSS and JavaScript

• Difficulty Level : Basic
• Last Updated : 04 Jan, 2023

In this article, we will see Temperature Conversion between Celsius, Fahrenheit & Kelvin using HTML CSS & JavaScript. The Temperature is generally measured in terms of unit degree., i.e. in degree centigrade, in degrees, Fahrenheit & Kelvin.

• Celsius is a standard unit of temperature on the Celsius scale, & is represented by the Â°C symbol.
• Fahrenheit uses the degree Fahrenheit as the unit & is represented with the Â°F symbol.
• Kelvin is an internationally recognized standard for scientific temperature measurement. It is an absolute temperature scale that is obtained by shifting the Celsius scale by âˆ’273.15Â°, in order to coincide the absolute zero to 0K.

The following examples depict 0Â°C in Fahrenheit & Kelvin:

```Input: 0 in Celsius
Output: 32 in Fahrenheit and 273.15 in Kelvin

Input: 0 in Fahrenheit
Output: -17.78 in Celsius and 255.37 in Kelvin

Input: 0 in Kelvin
Output: -273.15 in Celsius and -459.67 in Fahrenheit```

The formula for converting Celsius scale to Fahrenheit scale and Kelvin scale:

```T(Â°F) = (T(Â°C) * 9)/5 + 32
T(Â°K) = T(Â°C) + 273.15```

The formula for converting Fahrenheit scale to Celsius scale and Kelvin scale:

```T(Â°C) = ((T(Â°F) - 32) * 5) / 9
T(Â°K) = (T(Â°F)  - 32) * 5 / 9 + 273.15```

The formula for converting Kelvin scale to Celsius scale and Fahrenheit scale:

```T(Â°C) = (T(Â°K) - 273.15
T(Â°F) = (T(Â°K) - 273.15) * 9 / 5 + 32;```

Approach:

• Create one container in which all the elements are present.
• Inside this container add 3 input fields in which one for Celsius and another for Fahrenheit and Kelvin.
• Now Style which you want I add this container in the center.
• Now added Javascript which converts the following Temperature(Fahrenheit, Celsius, Kelvin) to the corresponding Remaining Two Temperature prints results in the various input fields.

Example: This example illustrates the basic temperature Conversion between Celsius, Fahrenheit & Kelvin using HTML, CSS & JS.

HTML

 `<``style``> ` `    ``* { ` `        ``margin: 0; ` `        ``padding: 0; ` `        ``font-family: Verdana, Geneva, Tahoma, sans-serif; ` `    ``} ` `     `  `    ``.container { ` `        ``width: 100%; ` `        ``height: 100vh; ` `        ``background-image:  ` `          ``linear-gradient(rgb(140, 219, 140), rgb(20, 141, 20)); ` `        ``display: flex; ` `        ``flex-direction: column; ` `        ``justify-content: center; ` `        ``align-items: center; ` `    ``} ` `     `  `    ``.container h1 { ` `        ``color: green; ` `        ``font-weight: 700; ` `        ``font-size: 25px; ` `        ``text-align: center; ` `    ``} ` `     `  `    ``.converter-row { ` `        ``display: flex; ` `        ``width: 40%; ` `        ``justify-content: space-between; ` `        ``align-items: center; ` `        ``background: rgb(0, 56, 0); ` `        ``border-radius: 10px; ` `        ``padding: 50px 20px; ` `    ``} ` `     `  `    ``.col { ` `        ``flex-basis: 32%; ` `        ``text-align: center; ` `    ``} ` `     `  `    ``.col label { ` `        ``font-size: 15px; ` `        ``font-weight: 500; ` `        ``margin-bottom: 10px; ` `        ``color: #fff; ` `    ``} ` `     `  `    ``.col input { ` `        ``width: 150px; ` `        ``height: 30px; ` `        ``background: white; ` `        ``border-radius: 5px; ` `        ``text-align: center; ` `    ``} ` ` ` ` `  `<``div` `class``=``"container"``> ` `    ``<``h1``>GeeksforGeeks <``br``> ` `        ``Temperature Converter ` `    ``<``div` `class``=``"converter-row"``> ` `        ``<``div` `class``=``"col"``> ` `            ``<``label``>Fahrenheit ` `            ``<``input` `type``=``"number"` `id``=``"fahrenheit"``> ` `        `` ` ` `  `        ``<``div` `class``=``"col"``> ` `            ``<``label``>Celsius ` `            ``<``input` `type``=``"number"` `id``=``"celsius"``> ` `        `` ` ` `  `        ``<``div` `class``=``"col"``> ` `            ``<``label``>Kelvin ` `            ``<``input` `type``=``"number"` `id``=``"kelvin"``> ` `        `` ` `    `` ` ` ` ` `  `<``script``> ` `    ``let celsius = document.getElementById('celsius'); ` `    ``let fahrenheit = document.getElementById('fahrenheit'); ` `    ``let kelvin = document.getElementById('kelvin'); ` `    ``celsius.oninput = function () { ` `        ``let f = (parseFloat(celsius.value) * 9) / 5 + 32; ` `        ``fahrenheit.value = parseFloat(f.toFixed(2)); ` `     `  `        ``let k = (parseFloat(celsius.value) + 273.15); ` `        ``kelvin.value = parseFloat(k.toFixed(2)); ` `    ``} ` `    ``fahrenheit.oninput = function () { ` `        ``let c = ((parseFloat( ` `            ``fahrenheit.value) - 32) * 5) / 9; ` `        ``celsius.value = parseFloat(c.toFixed(2)); ` `     `  `        ``let k = (parseFloat( ` `            ``fahrenheit.value) - 32) * 5 / 9 + 273.15; ` `        ``kelvin.value = parseFloat(k.toFixed(2)); ` `    ``} ` `    ``kelvin.oninput = function () { ` `        ``let f = (parseFloat( ` `            ``kelvin.value) - 273.15) * 9 / 5 + 32; ` `        ``fahrenheit.value = parseFloat(f.toFixed(2)); ` `     `  `        ``let c = (parseFloat(kelvin.value) - 273.15); ` `        ``celsius.value = parseFloat(c.toFixed(2)); ` `    ``} ` ``

Output:

My Personal Notes arrow_drop_up
Related Articles