Temperature Converter using HTML CSS and JavaScript

0 0 2 minutes read

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

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
  
    <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; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>zambiatek <br> 
            Temperature Converter</h1> 
        <div class="converter-row"> 
            <div class="col"> 
                <label>Fahrenheit</label> 
                <input type="number" 
                       id="fahrenheit"> 
            </div> 
  
            <div class="col"> 
                <label>Celsius</label> 
                <input type="number" 
                       id="celsius"> 
            </div> 
  
            <div class="col"> 
                <label>Kelvin</label> 
                <input type="number" 
                       id="kelvin"> 
            </div> 
        </div> 
    </div> 
  
    <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)); 
        } 
    </script> 
</body> 
  
</html> 