3.26 LAB: Temperature conversion In this lab you will implement a temperature converter. Five UI elements are declared for you in the template: Element description Element's ID Text input field for Celsius temperature CInput Text input field for Fahrenheit temperature FInput Button that, when clicked, converts from one temperature to the other ConvertButton Div for displaying an error message when temperature cannot be converted ErrDiv Image corresponding to the temperature WeatherImage Implement the 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 conversion button's click event in bodyLoaded() (2 points) When the page loads, the bodyLoaded function is called. Implement bodyLoaded 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 that 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. For example, 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 bodyLoaded function. Use addEventListener(), not oninput. Change the image to reflect the 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 page. Below 32 F 32 - 50 F Above 50 F cold.gif cool.gif warm.gif Handle bad input (2 points) When parseFloat() returns a NaN for the temperature to be converted, set ErrDiv's textContent to the message: "X is not a number", where X is the string from the text input. When parseFloat() returns a valid number, set ErrDiv's textContent to an empty string. The image below shows a sample error message. Code provided: Index.html Celsius: Fahrenheit: Javascript Provided: Index.js function ConvertCtoF(degreesCelsius) { // Your code here } function ConvertFtoC(degreesFahrenheit) { // Your code here } function bodyLoaded() { // Your code here }
3.26 LAB: Temperature conversion
In this lab you will implement a temperature converter. Five UI elements are declared for you in the template:
| Element description | Element's ID |
|---|---|
| Text input field for Celsius temperature | CInput |
| Text input field for Fahrenheit temperature | FInput |
| Button that, when clicked, converts from one temperature to the other | ConvertButton |
| Div for displaying an error message when temperature cannot be converted | ErrDiv |
| Image corresponding to the temperature | WeatherImage |
Implement the 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 conversion button's click event in bodyLoaded() (2 points)
When the page loads, the bodyLoaded function is called. Implement bodyLoaded 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 that 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. For example, 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 bodyLoaded function. Use addEventListener(), not oninput.
Change the image to reflect the 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 page.
| Below 32 F | 32 - 50 F | Above 50 F |
| cold.gif | cool.gif | warm.gif |
Handle bad input (2 points)
When parseFloat() returns a NaN for the temperature to be converted, set ErrDiv's textContent to the message: "X is not a number", where X is the string from the text input. When parseFloat() returns a valid number, set ErrDiv's textContent to an empty string. The image below shows a sample error message.
Code provided: Index.html
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body onload="bodyLoaded()">
Celsius:
<br>
<input id="CInput" type="text" value="" />
<br><br>
Fahrenheit:
<br>
<input id="FInput" type="text" value="" />
<br><br>
<input id="ConvertButton" type="button" value="Convert" />
<div id="ErrDiv" style="color: red"></div>
<br><br>
<img id="WeatherImage" src="warm.gif" />
</body>
</html>
Javascript Provided: Index.js
function ConvertCtoF(degreesCelsius) {
// Your code here
}
function ConvertFtoC(degreesFahrenheit) {
// Your code here
}
function bodyLoaded() {
// Your code here
}
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 1 images
