4.28 LAB: Temperature converter 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. Download the ZIP file below containing HTML, JavaScript, and image files. The HTML file 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 Paragraph 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. Implement an input event handler for each of the text fields that clears the opposing text field when the input changes. 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 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 emp
4.28 LAB: Temperature converter
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.
Download the ZIP file below containing HTML, JavaScript, and image files. The HTML file 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 | Paragraph 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 + 32Similarly, 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/9Register 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. Implement an input event handler for each of the text fields that clears the opposing text field when the input changes. 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 |
| 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.
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 2 images
