Temp Calculator

There are times when you need to convert between to different scales. In this case the user wants to convert between Celsius, Fahrenheit, and Kelvin temperatures.

<script language="JavaScript" type="text/javascript">
function preTemp(Far){
 document.getElementById("fav_color").value = "This " + Far;
}
function tempConverter(temp, scale){
	
var C, K, F;

switch (scale){
 case "F":
  F = temp;
  if (temp){
   C = ((5/9) * (temp-32));
   K = ((5/9)*(temp-32) + 273)
  }else{	
   C = "";
   K = "";
  }
  K = K.toFixed(2)
  C = C.toFixed(2)
 break;
	
 case "C":
  C = temp;
  if (temp){
   F = ((temp * 9/5) + 32)
   K = ((5/9)*(F-32) + 273)
  }else{
   F = '';
   K = '';
  }
   K = K.toFixed(2)
   F = F.toFixed(2)
  break;
	
 case "K":
  K = temp;
   if (temp)P
    C = K - 273;
    F = ((C * 9/5) + 32)
   }else{
    F = '';
    K = '';
   }
  F = F.toFixed(2)
  C = C.toFixed(2)
 break;

}

 document.getElementById("kelvin").value = K
 document.getElementById("celsius").value = C
 document.getElementById("fahrenheit").value = F

}
</script>

<form name="temp_input">
F: <input type="text" id="fahrenheit" name="fahrenheit" style=" width: 100px;" onkeyup="tempConverter(this.value, 'F')">
<br>
C: <input type="text" id="celsius" name="celsius" style=" width: 100px;" onkeyup="tempConverter(this.value, 'C')">
<br>
K: <input type="text" id="kelvin" name="kelvin" style=" width: 100px;" onkeyup="tempConverter(this.value, 'K')">
</form>

At first this looks like a large amount of code, but in reality it is very small. The switch statement's format makes it look larger than what it is. While we are talking about the switch statement, lets look at what it is doing. It is comparing the scale value, then depending on what field the user has entered their temperatures, it converts it to the other scales. To make this a little simpler let's just look at only one case in the switch statement.

 case "F":
  F = temp;
  if (temp){
   C = ((5/9) * (temp-32));
   K = ((5/9)*(temp-32) + 273)
  }else{	
   C = "";
   K = "";
  }
  K = K.toFixed(2)
  C = C.toFixed(2)
 break;

This is the Fahrenheit case. To convert Fahrenheit to Celsius we have to use the match equation five divided by nine times Fahrenheit minus 32 or 5/9 * (F - 32). To get the Kelvin scale we add 273 to the Celsius scale. Normally you would just add C + 273, but JavaScript treats both variables as strings, so we used the Fahrenheit to Celsius equation, then added 273 to it. So if the scale is set to F and temp has any data, we execute the equations. To make our fields blank when the user deletes all the data out of the Fahrenheit text box, we use an if else statement to make C and F equal a blank variable. At the very end, we use the toFixed method. This method rounds an integer to the placement that you would like after the decimal. In this case the hundredth, or two after the decimal. Again, this is so that our output is formatted to display neater in the text boxes. Neither the if else function or the toFixed method is required, it just makes the output look neater. After the switch statement, we tell JavaScript to write the values to the correct text box.
In the HTML, we have a simple form, that has three text boxes. Each box's id and name corresponds to the name of the scale it will output. We also use CS:S to make the boxes 100 pixels wide. By using the onkeyup even, we allow the tempConverter function to execute.