JavaScript

How to convert Celsius to Fahrenheit in JavaScript

According to the international system of units (SI), Celsius and Fahrenheit are both derived scales that are used in replacement to kelvin. Fahrenheit was invented by German physicist Daniel Gabriel Fahrenheit while Celsius was invented by Swedish astronomer Anders Celsius. Both of these measuring scales are the world’s most frequently used scales when it comes to measuring temperature.

Water freezes at 0℃ on Celsius, while it boils at 100℃. Fahrenheit has a freezing point of water at 32 and a boiling point of 212℉.

Conversion of Celsius to Fahrenheit Scale

With the following equation, we may convert from Celsius to Fahrenheit:

F = (9*C + 160) / 5

The temperature in Celsius is C, and the temperature in Fahrenheit is F.

Conversion of Fahrenheit to Celsius Scale

Similarly, using the equation below, we may convert from Fahrenheit to Celsius:

C = 5/9 (F-32)

The temperature in Celsius is C, and the temperature in Fahrenheit is F.

In this write-up, we will learn how we can convert our temperature from Celsius to Fahrenheit in JavaScript. Let’s jump into the implementation part:

Celsius to Fahrenheit Example

In this example, we will see how we can implement the algorithm in a javascript code.

let celsius = 32
let fahrenheit = 0

const convertTemp = (TempInCelsius) => {
    fahrenheit = (9 * TempInCelsius + 160)/5
    console.log(fahrenheit)
}

convertTemp(celsius)

The above code takes a Celsius temperature and converts it into Fahrenheit. In this code, celsius is a variable that holds the value in the Celsius scale. Fahrenheit is also a variable that will store the result in Fahrenheit.

Initially, Fahrenheit is set to 0 while it gets the calculated value when the convertTemp() is called. The convertTemp() function takes a parameter which is of course the celsius value and then computes it into Fahrenheit and stores it into the Fahrenheit variable. This function also logs the value in the output terminal as well.

Here is the output:

E:\nodeWorkspace>node basic.js
89.6

Let’s implement the above code in HTML which will dynamically calculate the celsius value into Fahrenheit:

HTML Code:

<div class="container">
    <div class="row my-5 py-5">
        <div class="col-4 offset-4">
            <div class="form-group">
                <label for="">Enter the temperature below</label>
                <input type="text" id="temp" class="form-control">
            </div>
        <input type="submit" id="submit"  class="btn btn-success">
    </div>
</div>
<div class="row my-3 py-3">
    <div class="col-4 offset-4">
        <div class="form-group">
            <label for="">Temperature in Fahrenheit</label>
            <input type="text" id="Faht" class="form-control" readonly>
        </div>
    </div>
</div>

JavaScript Code:

<script>
    let Fahrenheit = document.getElementById('Faht')
    let submit = document.getElementById('submit')
    submit.addEventListener('click', (e)=>{
        let Celsius = document.getElementById('temp').value
        e.preventDefault()
        result(Celsius)
    })
    const result = (cel) =>{
        Fahrenheit.value = (9 * cel + 160 ) / 5
    }
</script>

In the above HTML code, we have used bootstrap to give styles to the elements to make them look a little better than the default ones.

There is an input field temp which takes in the integer value and another input field with the id of Faht which is a read-only field and can only output the calculated result of the celsius value.

In Javascript code, there is an onClick event listener on submit button which upon clicking, triggers the result() function and sets the value to the read-only input field, and displays it on the browser.

Let’s see the output on the browser:

After entering the values we will see the following results:

Conclusion

For converting the temperature from Celsius to Fahrenheit, you can use the formulae F = (9*C + 160) /5 in which F is the temperature in Fahrenheit and C is the temperature in Celsius. You are only required to put this formula in the JavaScript and provide the temperature in the required scale and the program will convert it to the desired Scale which in our case is Fahrenheit. Well, we learned how to convert Cecsius to Fahrenheit and vice versa in JavaScript.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.