In this article I will show you how to perform Celsius to Fahrenheit temperature conversion using JavaScript. The code is very simple and easy to understand and use. What does the program will to is to ask the user temperature in Celsius and then convert it to its Fahrenheit equivalent value. I also added a function to check for invalid entries like letters and special characters.
If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<head>
<style>
body {
background-color:lightgreen;
font-family:arial;
font-size:20px;
color:blue;
}
label {
float: left;
width: 30%;
text-align: left;
margin-right: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.form-field-no-caption {
margin-le
input[type="radio"]{
float:left;
}
</style>
<meta charset="UTF-8">
<title> Celsius To Fahrenheit in JavaScript </title>
<script type="text/javascript">
function solve_temp() {
var input = document.getElementById("userInput").value;
var celsius = parseFloat(input);
if (isNaN(celsius)) {
alert("Please enter a number.");
document.getElementById("userInput").value="";
document.getElementById("userInput").focus();
document.getElementById("result").innerHTML = "";
}
else {
var solve_fahrenheit = celsius * 9 / 5 + 32;
var solve_results = celsius +'\xB0C in Celsius is equivalent to '
+ solve_fahrenheit + '\xB0F' + ' in Fahrenheit.' ;
document.getElementById("result").innerHTML = solve_results;
}
}
function clear_textbox(){
document.getElementById("result").innerHTML = "";
document.getElementById("userInput").value="";
document.getElementById("userInput").focus();
}
</script>
</head>
<body>
<h2> Celsius To Fahrenheit in JavaScript </h2>
Enter temperature in celsius
<br>
<input type="text" id="userInput" size="8" maxlength="8" autofocus>
<br><br>
<input type="submit" value="Check"
title="Click here to celsius to fahrenheit."
onclick="solve_temp()" />
<input type="submit" value="Clear"
title="Click here to clear the text box."
onclick="clear_textbox()" />
<br><br><br>
<p id="result"></h1>
</body>
</html>
