# Assignment 3: Conversion Calculator (Text Field I/O)

## Text Field I/O on the Web Page

We are going to move away from input via "prompt" and output via "alert".

Those are fine for smaller interactive programs, or for occasional use. But for many web pages input comes from text fields on the page. Often output is reported similarly, in text fields on the page. (Another way is to write a completely new web page, but we will save that for later).

In other programming languages it is not unusual for input data to come from files stored on the hard drive. JavaScript can do this too, but many JavaScript programs are intended for use in Web pages, so file use is not nearly as common in JavaScript as in other languages.

In this program we will type input values into text fields on the web page.

Then when the "run" button is clicked, the values we typed will be transmitted to your JavaScript main function as arguments. When the program returns, it will return a string (either containing the result or an error message) and that string will be installed into a text field on the web page so it can be viewed in the browser.

In addition to a new form of I/O, in this program we will practice writing and calling functions. We will also get more practice in writing sequences of conditional statements, and in input data validation.

## Overall program description

It might make more sense to read the description of the program functionality while viewing the HTML template I have prepared for you to use on this program.

You are to write a JavaScript program that allows the user to select one of four different functions to be computed:

1. convert feet to inches
2. convert degrees fahrenheit to celsius
3. convert pounds to kilograms
4. compute the sum of non-prime numbers in a sequence
(That last item -- sum of non-primes -- is not really what might be called a conversion. It is just a made-up function that is non-trivial to write; it will be good function writing practice, moreso that the simple conversion functions.)

The user will type into a text window the number that the selected function will convert. When the "convert" button is clicked, your program will excute and compute the selected function on the given input value. The value returned by your program will be installed in the last text field (this installation happens automatically by the HTML template).

Your program will have some things to do right at the beginning, before the selected function is computed:

• validate each input argument to make sure it is the right type, range, and format
• form an appropriate error message (if needed) and send it back to the web page (via "return").

Once the inputs are validated, your program will then decide (based on the conversion type value) which of the 4 functions to invoke; it will call that function, pass the input value as argument, and will then return the value that function computes. Depending on how much validation (if any) you leave to be done in the functions themselves, the returned "result" might be an error message.

Here are the details for each of the 4 functions:

1. convert feet to inches
For this one, convert based on 12 inches in 1 foot. The input value can be any number that is 0 or greater.
2. convert degrees fahrenheit to celsius
The input value can be any number, including negative (we will ignore the fact that no real temperature can be below -459.67F ). Compute the conversion based on C=(F-32)/1.8
3. convert pounds to kilograms
For this one, convert based on 2.20462 pounds in 1 kilogram. The input value can be any number 0 or greater.
4. sum of non-prime sequence
As noted above, this is not some well-known function, it is just one I made up so you can write a non-trivial function. The input value can be any integer that is 1 or greater. Let's call the input value "n". Compute the sum of all non-prime integers from 1 to n. That's it. You have a function supplied in the template named "isPrime" that you should use to determine if an integer is prime; call it by passing in an integer, like this: isPrime(k). It returns true if k is prime, and false otherwise.

Return value
The main function will be returning a string (it is being installed into a text field on the web page). This means that if the inputs are valid and you compute a conversion function, the number it produces will get converted to text automatically by JavaScript. It also means that if something fails (like invalid input values) you can simply have the main function return a string that is an error message (something like return "input value is not in range"). The user will see the error message in the text field on the web page where the result would be.

## Examples (Test Data)

Make sure your program properly detects and rejects all invalid inputs... like passing a non-number, or passing a negative number in when you ask for the feet to inches conversion, or passing a non-integer to the summing function.

The following test cases are all given as ordered pairs, where (i,o) means that with input i the function will produce output o.

Feet to Inches: (1, 12) (10, 120) (0.5, 6) (0.01, 0.12) (22.7, 272.4) (131.3, 1575.6000000000001)

Fahrenheit to Celsius: (32,0) (212,100) (0,-17.77777777777778) (-100,-73.33333333333333)
(73.4,23.000000000000004) (45,7.222222222222222)

Pounds to Kilograms: (2.20462,1) (1,0.45359290943563974) (10,45.35929094356398)
(177177717777,80366556493.6361) (2.20462,1) (22.0462,10)

Non-primes Sum: (1,1) (8,19) (11,38) (14,64) (23,176) (24,200) (213,18353)
(1101,513698) (724680,242352142155)

## Hints

• Continue to develop your view of programing as "growing" the finished product through dozens of intermediate working versions. Each version is a working program. It does not do everything the requirements call for until the end. However, each intermediate version works because it compiles and runs and produces the behavior you expect at that point in its evolution.

Growing your program means adding a little piece of new code at a time. Do not type in 100 lines of code and then hope it works. It won't... and then you won't be able to easily find the line(s) that are causing the problem(s). Don't add 50 lines at a time; don't add 30, or 15. Add a few lines... 4, 5, maybe 10. Compile, test. Then add more.

• Start a program (version 0, let's say) by building an outline of the algorithm with mostly comments and maybe a few alerts. Then go back and convert each comment into a few lines of code. Change a Each time you add a few lines of code, test the program to see two things:
1. if the new part of the program is doing what you expect it to be doing.
2. if the old parts of the program did not break... are still behaving like they were (or should be).
• When you write a new function, write a stub. This is a function that doesn't do anything much other than announce that it is working (via alert, for example). You might then make the stub alert its argument(s) so you can see that the correct information is being passed in.

You might also have the stub return a "fake value" of the correct type, range, and format so that the rest of the program that is calling it can use the stub. This means that if the function supposed to compute and return some non-negative number, then just put in "return 1" so that it at least appears to be working.

Once it is all connected up correctly and running when called, you can go back and make it produce the correct results and replace the "fake return" with the correct return value.

• When you are writing your conditional cascade (either if-then-else-ifs or a switch) you can start with each case being nothing but an alert that says "doing the foo case". Then you can add a call to a function stub when you write the function stub. Then you can go back and flesh out the function body itself. This is how to "grow" a program.

## Final Checklist

1. Use the template. Do not change the HTML in the template between the "dont mess with" comments. This HTML sets up the connections between your program and the text fields on the Web page. Those text fields need to remain as we wrote them so that our testing/grading framework will operate properly on your program.

2. Make sure to fill out the HTML paragraphs for the program description, input, output, and termination. You will have to replace the ones I wrote in the template.

3. Make sure you write at least 5 functions (not counting the myMain and isPrime functions that I gave you in the template). There will be 4 functions implementing the 4 conversions you can select with the radio buttons. In addition, write at least one other function to do data validation. You may wish to write more, feel free to do so.

4. Follow these coding and commenting conventions:
To be filled in...