3.26 LAB: Temperature conversionIn this lab you will

3.26 LAB: Temperature conversionIn 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 + 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 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 ***** 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.