A1 – Temperature Converter


Objectives: Gain experience creating an HTML form and writing a simple program in JavaScript.

Description: This program is intended to provide you with experience using forms, input fields, labels, and command buttons.


Part I: Create the form

Add the form fields on the screen shot below to your page.

Temperature Converter interface

Your form fields should include the following:

  • A label that reads "Enter Celsius Temperature:".
  • A text box with the ID "txtTempC" and a width of 0.75 inch.
  • A button called "cmdCalc" that has the value "Convert".
  • A label that reads "Fahrenheit Temperature:".
  • A text box with the ID "txtTempF" and a width of 0.75 inch.

Your form should look as much like the screenshot as possible.

Here are some supplemental notes on forms if you need additional clarification.

Here are some tutorials if you need them:


Part II: Writing a Script

Write a function called "calcFahrenheit" that will be executed when the user clicks the Convert button. The script should read the Celsius temperature that the user entered in one text box, convert it to Fahrenheit, and then display the answer in the other text box. (Your script can be included in the <head> section of your HTML file for this assignment if you wish.) Follow these steps:

  • Declare a local variable tempF and another called tempC.
  • Read tempC from the text box using the line tempC = document.getElementById("txtTempC").value;
    • The preceding line assumes that you named your first textbox txtTempC. Always be sure to use names that are indicative of the use of the controls.
  • Convert the Celcius value to Celcius using a statement like
    tempF = tempC * (9/5) + 32 ;
  • Display the value in the form using the line: document.getElementById("txtTempF").value=Math.round(tempF*10)/10;
    • The preceding line assumes that you assigned your form control the id txtTempF.
    • Since Math.round only results in whole numbers, multiplying by 10, rounding, and then dividing by 10 results in one decimal position.
  • Associate the calcFahrenheit function with the command button by adding the attribute onclick="calcFahrenheit();" to the button specification in your HTML code




Useful Tips

Using Functions

Be sure to use a JavaScript function. User-defined functions are generally placed inside <script> </script> tags in your html header (meaning between the <head> </head> tags) or in an external file.

Functions follow this format:

function functionName()
{
   // programming statements belong here
}

Make sure your function name is indicative of the function purpose. Be sure to include the () (open parenthesis and close parenthesis) after the function name, and place all function statements between curly brackets.

You can call the function by simply referring to the function's name in quotation marks. For example, the click event above could be rewritten to call a function as in the following:

onclick="calcFahrenheit();"

Look at the page source for the sample program for an example.


Function Structure

Most scripts (and other programs) consist of

  • variable declarations
  • input
  • processing
  • output

This program follows the same pattern. All of the stages will be performed when the user clicks the Convert button:

  • First you read the value that the user entered for Celcius temperature. That is input.
  • Then you convert that value to Fahrenheit using a calculation. You also round the result to get rid of most of the digits following the decimal point. Those steps comprise the processing stage in this simple program.
  • Then you place your result into the field for Fahrenheit temperature. That is output.

Comments

Be sure that your code is documented thoroughly, i.e., carefully comment your script like the example.

In all programs you should include a comment block at the beginning or your program with your name, the assignment number, and a brief description of the purpose of the program.

You should embed comments in your code whenever the purpose of subsequent lines may be unclear to reviewers.

Don't just write the code – be SURE you understand what is going on!


Initial Field

In all programs in this course you must be sure that the cursor automatically appears in the initial field.

When the program starts the cursor must be in the initial field, in this case the Celcius field. You can accomplish this using a line like
document.getElementById("txtTempC").focus();


Odds & Ends

The interface should look as much as possible like the screenshot above.

Test the program on multiple browsers.

Sample program Use View Page Source to see an example of underlying code. Your program is going to be VERY similar to this one, except you are changing field names and the conversion factor. Cut and Paste is our friend!

You can access the JavaScript error console in Firefox via Tools Console.

Be sure to use CSS to style your page and include either the XHTML Transitional or the XHTML Strict DOCTYPE.

Please refer to the grading rubric for grading details.