How to create a Fahrenheit to Celsius converter with JavaScript

May 30th, 2006

This is an example of how to create a Fahrenheit to Celsius(and vice versa) Converter with JavaScript. It could just as well – with some minor changes – be inserted within <script> tags in the head section of a HTML document, but since I belive it’s always best to try and separate structure from function I have created it as an external JavaScript.

The External JavaScript

I use this JavaScript myself in the Web Resources section of WebPelican. This is what it looks like in action: Fahrenheit to Celsius Converter.

If you wan’t to use this converter script on your website you can download the .js file here: convertToFahrenheitOrCelsius.js, or do some copy and paste with the code below.
A more simple way is to add it as a google gadget ( to your webpage or/and iGoogle startpage ). Here is the listing for the converter gadget at the AppFoyer gadgets directory: Fahrenheit Celsius Converter Gadget.

/*
Fahrenheit to Celsius or Celsius to Fahrenheit Converter Script
Created by Martin Carlsson
*/
/*Is DOM supported?*/
var ie = (document.all) ? true:false; // IE4+
var dom = ((document.getElementById) && (!ie)) ? true:false; // Mozilla

/*Calls to the help function*/
setEventById("celsius", "keyup", function(){converter("celsius");});
setEventById("fahrenheit", "keyup", function(){converter("fahrenheit");});
setEventById("round-to-integer", "click", function(){roundChecked();});

/*Help function to add event listeners for browsers that support DOM and those who don't*/
function setEventById(id, ev, fu) {
if(dom) {
document.getElementById(id).addEventListener(ev, fu, false);
}
if(ie) {
document.getElementById(id).attachEvent('on' + ev, fu);
}
}

/*Converts Fahrenheit to Celsius and vice versa*/
function converter(scale) {
checked = document.getElementById("round-to-integer").checked;
inCelsius=(document.getElementById("fahrenheit").value -32) * 5 / 9;
inFahrenheit=document.getElementById("celsius").value * 9 / 5 + 32;
if (scale=="celsius") {
if(checked)
document.getElementById("fahrenheit").value=Math.round(inFahrenheit);
else
document.getElementById("fahrenheit").value=inFahrenheit;
}
else if (scale=="fahrenheit") {
if(checked)
document.getElementById("celsius").value=Math.round(inCelsius);
else
document.getElementById("celsius").value=inCelsius;
}
}

/*Is round to nearest integer checked?*/
function roundChecked() {
checked = document.getElementById("round-to-integer").checked;
if(checked) {
document.getElementById("celsius").value=Math.round(inCelsius);
document.getElementById("fahrenheit").value=Math.round(inFahrenheit);
}
else {
document.getElementById("celsius").value=inCelsius;
document.getElementById("fahrenheit").value=inFahrenheit;
}
}

/*End convertToFahrenheitOrCelsius*/

Linking to the JavaScript

The script can be linked to in the end of the <body> after the HTML markup used for creating the form, like this:


<body>
Your text, HTML form and other content goes here....
<script type="text/javascript" src="convertToFahrenheitOrCelsius.js">
</script>
</body>

To see how to create the HTML form, just look at the source of Fahrenheit to Celsius Converter.

Entry Filed under: Gadgets,JavaScript

Bookmark with del.icio.us

Digg it?

1 Comment

  • 1  |  May 23rd, 2009 at 12:31 am by inger meijer carlsson

    Förstår absolut ingenting/mor

Links

Subscribe