2. Note that the JavaScript file has some starting JavaScript code, including the $ function, a clearTextBoxes() function, and an onload event handler that attaches three event handlers named convertTemp(), toCelsius(), and toFahrenheit().

3. Code the toFahrenheit() function that is executed when the user clicks on the second radio button. It should change the text in the labels for the text boxes so they read as in the second interface above. It should also call the clearTextBoxes() function to clear the text boxes.

4. Code the toCelsuis() function that is executed when the user clicks on the first radio button. It should change the text in the labels for the text boxes so they read as in the first interface above. It should also call the clearTextBoxes() function to clear the text boxes.

5. Code the convertTemp() function without any data validation. It should calculate the temperature based on which button is checked. To convert

Fahrenheit to Celsius, first subtract 32 from the Fahrenheit temperature, and

then multiply that result by 5/9. To convert Celsius to Fahrenheit, first multiply Celsius by 9/5, and then add 32. The result in either case should be rounded to zero decimal places.

6. Add data validation to the convertTemp() function. The only test is whether the entry is a valid number. If it isnt, this message should be displayed in a dialog box: You must enter a valid number for degrees.

7. Add any finishing touches to the application like moving the focus to the first text box whenever thats appropriate.

Convert_Temp.js

"use strict"; var $ = function(id) { return document.getElementById(id); }; var clearTextBoxes = function() { $("degrees_entered").value = ""; $("degrees_computed").value = ""; }; window.onload = function() { $("convert").onclick = convertTemp; $("to_celsius").onclick = toCelsius; $("to_fahrenheit").onclick = toFahrenheit; $("degrees_entered").focus(); };

HTML

         
 
Convert temperatures
 Fahrenheit to Celsius Celsius to Fahrenheit Enter F degrees:  Degrees Celsius:     
  

CSS

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 450px; border: 3px solid blue; } h1 { color: blue; margin: 0 0 .5em; } main { padding: 1em 2em; } label { float: left; width: 10em; margin-right: 1em; } input { margin-bottom: .5em; } #convert { width: 10em; }