GeeksforGeeks App
Open App
Browser
Continue

Temperature Converter using HTML CSS and JavaScript

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 Tutorials