CIS 757/790 Temperature Conversion  Prof. Auciello

Fahrenheit Celsius Click this radio button for directions.


Equals 



Assignment:   Modify to  convert from  grams to lbs, or
              from one currency to another (Peso-Dollar),
              (Yen-Dollar) etc.  Add Custom touches.

Source code follows:



<!-- CIS 757/790        TEMP CONV IN JAVASCRIPT           PROF. AUCIELLO


TOPICS:         radio vs button inputs
                passing a user input (yourInput) to tempVal
                forms - elements, etc
                value  -- yourInput.value
            

-->


<HTML>
<HEAD>
	<TITLE>Temp Converter (Based on New Riders)</TITLE>
      <script language = "JavaScript">
	function displayTemp()
       		 //            ! -- displayTemp is indexable.
  	{ var tempVal = document.forms[0].yourInput.value
          //                               !          ! -- contents of field
          //                               ! name of input field

          if (document.forms[0].elements[1].checked)
	       //  !           !        !
	       //  !           !        ! -- note "1" here -- 1st button
       	       //  !           ! 'elements' describes form elements on a
               //                 page.
               //  !           ! can be named or referred to by indexed
               //                position.
               //  !
               //  document.forms = a property of document, used to define
               //  forms.  has a length property (0), that defines the
               //  number of forms within the document.
               //  says: if 1st button checked, it is fahren to centigrade.
            { var finalC = (tempVal-32)*5/9
              var finalTemp = Math.round(finalC) + " degrees celsius" 
            } // end button 1

         if (document.forms[0].elements[2].checked)
             //                         !
             //                         ! 2nd element in form
            { var finalF = (tempVal*9/5)+32
              var finalTemp =Math.round(finalF) + " degrees fahrenheit"    
            } // end button 2

         if (document.forms[0].elements[3].checked)
            { alert("Enter Number in top box. Select base.  Result is in lower box.  Extra Credit?  At what temp does Celsius = Fahren?");
            } // end button 3

         document.forms[1].result.value = finalTemp;

  } // end function.
</SCRIPT>

<BODY BGCOLOR=yellow>
<CENTER>
<pre> CIS 757/790 Temperature Conversion  Prof. Auciello </pre>
<P>
<FORM>
<INPUT TYPE="text" NAME="yourInput" SIZE=8 VALUE="" onChange="displayTemp();">
<INPUT type="radio" NAME="F" SIZE=1 onClick="displayTemp()">Fahrenheit
<INPUT type="radio" NAME="F" SIZE=1 onClick="displayTemp()">Celsius   
<input type="radio" onClick="displayTemp()"> Click this radio button to invoke alert <br>
</FORM>
<P>


<FORM name=buttons>
<BR><BR>
Is equal to:<P>
<INPUT TYPE="text" NAME="result" SIZE=30 VALUE="">
<br><br>
</form>
<p>
</CENTER>
</BODY>
</HTML>




Questions:  

Where is input value stored?

Note:  Outline of Program is:
HEAD
  SCRIPT
     get input 
     test for 3 options, calc.
     display result.
  /SCRIPT
/HEAD
BODY
  define input field.
  define 3 buttons.
  define output field.
 /BODY

What function rounds a number to 0 decimals?

Are Radio Buttons exclusive?

What connects the result field with the output box?