40 lines
3.1 KiB
Plaintext
40 lines
3.1 KiB
Plaintext
In this lab, you will implement a temperature converter in JavaScript. The user may type a temperature in either the Celsius or Fahrenheit textbox and press Convert to convert the temperature. An image displays based on the converted temperature.
|
|
|
|
Screenshot showing 12 in Celsius textbox, 53.6 in Fahrenheit textbox, and picture of the sun.
|
|
|
|
The given HTML template declares five UI elements:
|
|
Element's ID Element description
|
|
cInput Text input field for Celsius temperature
|
|
fInput Text input field for Fahrenheit temperature
|
|
convertButton Button that, when clicked, converts from one temperature to the other
|
|
errorMessage Div for displaying an error message when temperature cannot be converted
|
|
weatherImage Image corresponding to the temperature
|
|
Implement conversion functions (2 points)
|
|
|
|
Implement the convertCtoF() and convertFtoC() functions to convert between Celsius and Fahrenheit. convertCtoF() takes a single numerical argument for a temperature in Celsius and returns the temperature in Fahrenheit using the following conversion formula:
|
|
|
|
°F = °C * 9/5 + 32
|
|
|
|
Similarly, convertFtoC() takes a single numerical argument for a temperature in Fahrenheit and returns the temperature in Celsius using the following conversion formula:
|
|
|
|
°C = (°F - 32) * 5/9
|
|
Register Convert button's click event handler (2 points)
|
|
|
|
When the DOM finishes loading, the domLoaded() function is called. Implement domLoaded() to register a click event handler for the Convert button (id="convertButton"). Use addEventListener(), not onclick.
|
|
|
|
When the Convert button is pressed, the text box that contains a number should be converted into the opposing temperature. So if a number is in the Celsius text box (id="cInput"), the temperature should be converted into Fahrenheit and displayed in the Fahrenheit text box (id="fInput") and vice versa. Use parseFloat() to convert from a string to a number and do not round the result.
|
|
Ensure only one text field contains a value (2 points)
|
|
|
|
Ensure that only one text field contains a value at any moment in time unless the Convert button has been pressed. Ex: When the Celsius field has a number and the user enters a Fahrenheit entry, the Celsius field should be cleared as soon as the user begins to type. This will require implementing an input event handler for each of the text fields that clears the opposing text field when a change occurs. Register each input event handler in the domLoaded() function. Use addEventListener(), not oninput.
|
|
Change image to reflect temperature (2 points)
|
|
|
|
When the temperature is converted, change the image to reflect the temperature in Fahrenheit. Each image is in the same directory as your .html file. To change the image, change the image's src property to the appropriate filename.
|
|
Below 32 F 32 - 50 F Above 50 F
|
|
snowflake storm cloud sun
|
|
cold.png cool.png warm.png
|
|
Handle bad input (2 points)
|
|
|
|
When parseFloat() returns NaN for the temperature to be converted, set errorMessage's innerHTML to the message: "X is not a number", where X is the string from the text input. When parseFloat() returns a valid number, set errorMessage's innerHTML to an empty string. The image below shows a sample error message.
|
|
|
|
|