This is another School / College program which helps to learn and understand about JavaScript programming. In this example you are going learn to find Celsius from Fahrenheit using pure JavaScript.
There are two versions I have actually written for this post, one will allow any characters in text box and the second will allow only numbers.
Before begin writing the entire program, here is the JavaScript part:
|
1 2 3 4 5 6 7 8 9 10 |
function findCelsius(){ var fahrenheit = document.getElementById("fahrenheit").value; var celsius; if(fahrenheit != ''){ celsius = (fahrenheit - 32) * 5/9; document.getElementById("output").innerHTML = celsius; }else{ document.getElementById("output").innerHTML = "Please enter a value!"; } } |
So basically the formula for finding the Celsius is very simple,
c = ( f – 32 ) x 5 / 9
c – celsius
f – fahrenheit
Pass the Fahrenheit value to the formula, so it will give us the Celsius value.
Here is the entire program (1st method, allows any character in the text box):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <head> <script> //find celsius from fahrenheit javascript function //by tutorialsmade.com function findCelsius(){ var fahrenheit = document.getElementById("fahrenheit").value; var celsius; if(fahrenheit != ''){ celsius = (fahrenheit - 32) * 5/9; document.getElementById("output").innerHTML = celsius; }else{ document.getElementById("output").innerHTML = "Please enter a value!"; } } </script> </head> <body> <h2>Enter Fahrenheit</h2> <input type="text" id="fahrenheit" /> <button onclick="findCelsius()" >Find Celsius</button> <h4>Output: <span id="output"></span></h4> </body> </html> |
I have not used alert() to show the output, it is pretty ugly nowadays, so I’m printing the output using JavaScript innerHTML.
Now, the second method which allows only numbers in the text box:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <script> //find celsius from fahrenheit javascript function //by tutorialsmade.com function findCelsius(){ var fahrenheit = document.getElementById("fahrenheit").value; var celsius; if(fahrenheit != ''){ celsius = (fahrenheit - 32) * 5/9; document.getElementById("output").innerHTML = celsius; }else{ document.getElementById("output").innerHTML = "Please enter a value!"; } } //this is just to make sure if the user enter number or not, not actually needed for this program //this function will allow only numbers to be entered in the textbox function allowOnlyNumbers(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } </script> </head> <body> <h2>Enter Fahrenheit</h2> <input type="text" id="fahrenheit" onkeypress="return allowOnlyNumbers()" /> <button onclick="findCelsius()" >Find Celsius</button> <h4>Output: <span id="output"></span></h4> </body> </html> |
The second method uses another JavaScript function allowOnlyNumber(), which will be initiated onKeyPress in the text box.
Demo for both the programs:
1. Allow any character:
2. Allow only numbers:
I couldnt understand this code part, please help
function allowOnlyNumbers(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode 57)) {
return false;
}
return true;
}
As I already mentioned in the code, this part is not required. This is just an extra function to make sure the user enters only numbers in the textbox. See the second demo, the textbox won’t allow you to enter any alphabets, it will allow only the numbers. http://www.tutorialsmade.com/demo/celsius.html
It is case insensitive, basically it check for both caps and small letters AaEeIiOoUu
Hey There,
I can’t get output for the Following :
Temp Converter
Temperature Converter
var C= parseFloat(prompt(‘Enter temperature in C :’));
var F= (9*C + 160)/5;
document.write(“At ” +C “C, Temp. in F is” +F);