In this exercise, you’ll use radio buttons to determine whether the conversion is from Fahrenheit to Celsius or vice versa. You’ll also modify the DOM so the labels change when a radio button is clicked, and the page displays an error message when the user enters invalid data. 2. Note that the JavaScript file has some starting JavaScript code, including the $() function, three helper functions, three event handler functions, and a DOMContentLoaded event handler that attaches the three event handlers.3. Review how the toCelsius() and toFarhenheit() event handler functions call the toggleDisplay() helper function and pass it strings to display. Also note that the toggleDisplay() helper function and the convertTemp() event handler function are incomplete.4. Code the toggleDisplay() function so it changes the text in the labels for the text boxes to the values in the parameters that it receives. It should also clear the disabled text box where the computed temperature is displayed.5. Code the convertTemp() function without any data validation. It should use the helper functions to calculate the temperature based on which radio button is checked. The value returned by the helper functions should be rounded to zero decimal places Currently Open Documents* ~/Desktop/INF286/exercises_extra/ch06/convert_temps/convert_temp.js :(functions) ©O convert_temp.css"use strict";const $ = selector => document.querySelector(selector);1O index.htmlO convert_temp.jsa register.js34 ▼/******helper functions**************/5******const calculateCelsius = temp => (temp-32) * 5/9;const calculateFahrenheit =78.temp => temp * 9/5 + 32;9.10const toggleDisplay(label1Text, label2Text) => {%3D11121314 ▼/********15event handler functions16***************************/const convertTemp() => {171819};20() => toggleDisplay("Enter F degrees:", "Degrees Celsius:");()21const toCelsius =22const toFahrenheit =toggleDisplay("Enter C degrees:", "Degrees Fahrenheit:");=>23document.addEventListener ("DOMContentLoaded", () => {// add event handlers$("#convert").addEventListener("click", convertTemp);$("#to_celsius").addEventListener("click", toCelsius);$("#to_fahrenheit").addEventListener("click", toFahrenheit);242526272829// move focus$("#degrees_entered").focus( );});303132 -L: 18 C: 1JavaScript :Unicode (UTF-8) :Windows (CRLF) *Saved: 12/3/21, 5:08:06 PM901 / 68 / 32 Q -100% : Currently Open Documents* ~/Desktop/INF286/exercises_extra/ch06/convert_temps/index.html :(no function selected) :O convert_temp.css1© index.html2 ▼O convert_temp.jsA register.js3 ▼Convert Temperatures6.78.9.Convert temperatures1011▼1213▼Fahrenheit to Celsius141516Celsius to Fahrenheit171819Enter F degrees:20212223▼Degrees Celsius:2425262728293031323334L: 1 C: 1HTML :Unicode (UTF-8) :Windows (CRLF) :Saved: 6/27/21, 3:36:00 PM883 / 105 / 34 Q -100% :

The code as, Updated convert_temp.js file: "use strict";var $ = function(id) { return document.getElementById(id); }; var clearTextBoxes = function() { $("degrees_entered").value = ""; $("degrees_computed").value = "";}; //Function that changes labelsfunction toCelsius() { $("degree_label_1").innerHTML = "Enter F degrees:"; $("degree_label_2").innerHTML = "Degrees Celsius::"; clearTextBoxes();} function toFahrenheit() { $("degree_label_1").innerHTML = "Enter C degrees:"; $("degree_label_2").innerHTML = "Degrees Fahrenheit:"; clearTextBoxes();} //Function that converts the temperaturefunction convertTemp() { //Reading value var val = parseFloat($("degrees_entered").value); //Validating number if(isNaN(val)) { alert("You must enter a valid number for degrees."); } else { //Checking for corresponding radio button check and then converting if($("to_celsius").checked) { $("degrees_computed").value = (val-32)/1.8; } else { $("degrees_computed").value = (val*1.8)+32; } }} window.onload = function() { $("convert").onclick = convertTemp; $("to_celsius").onclick = toCelsius; $("to_fahrenheit").onclick = toFahrenheit; $("degrees_entered").focus();}; Sample output,

Answered: t() event handler functions call the…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

In this exercise, you’ll use radio buttons to determine whether the conversion is from Fahrenheit to Celsius or vice versa. You’ll also modify the DOM so the labels change when a radio button is clicked, and the page displays an error message when the user enters invalid data.

2. Note that the JavaScript file has some starting JavaScript code, including the $() function, three helper functions, three event handler functions, and a DOMContentLoaded event handler that attaches the three event handlers.

3. Review how the toCelsius() and toFarhenheit() event handler functions call the toggleDisplay() helper function and pass it strings to display. Also note that the toggleDisplay() helper function and the convertTemp() event handler function are incomplete.

4. Code the toggleDisplay() function so it changes the text in the labels for the text boxes to the values in the parameters that it receives. It should also clear the disabled text box where the computed temperature is displayed.

5. Code the convertTemp() function without any data validation. It should use the helper functions to calculate the temperature based on which radio button is checked. The value returned by the helper functions should be rounded to zero decimal places

Currently Open Documents
* ~/Desktop/INF286/exercises_extra/ch06/convert_temps/convert_temp.js :
(functions) ©
O convert_temp.css
"use strict";
const $ = selector => document.querySelector(selector);
1
O index.html
O convert_temp.js
a register.js
3
4 ▼
/***
***
helper functions
**************/
5
******
const calculateCelsius = temp => (temp-32) * 5/9;
const calculateFahrenheit =
7
8.
temp => temp * 9/5 + 32;
9.
10
const toggleDisplay
(label1Text, label2Text) => {
%3D
11
12
13
14 ▼
/****
****
15
event handler functions
16
******
*********************/
const convertTemp
() => {
17
18
19
};
20
() => toggleDisplay("Enter F degrees:", "Degrees Celsius:");
()
21
const toCelsius =
22
const toFahrenheit =
toggleDisplay("Enter C degrees:", "Degrees Fahrenheit:");
=>
23
document.addEventListener ("DOMContentLoaded", () => {
// add event handlers
$("#convert").addEventListener("click", convertTemp);
$("#to_celsius").addEventListener("click", toCelsius);
$("#to_fahrenheit").addEventListener("click", toFahrenheit);
24
25
26
27
28
29
// move focus
$("#degrees_entered").focus( );
});
30
31
32 -
L: 18 C: 1
JavaScript :
Unicode (UTF-8) :
Windows (CRLF) *
Saved: 12/3/21, 5:08:06 PM
901 / 68 / 32 Q -
100% :

Currently Open Documents
* ~/Desktop/INF286/exercises_extra/ch06/convert_temps/index.html :
(no function selected) :
O convert_temp.css
1
<!DOCTYPE html>
© index.html
2 ▼
<html>
<head>
O convert_temp.js
A register.js
3 ▼
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Convert Temperatures</title>
<link rel="stylesheet" href="convert_temp.css">
</head>
6.
7
8.
9.
<body>
<main>
<h1>Convert temperatures</h1>
10
11
▼
12
13
<div>
▼
<input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius
</div>
<div>
14
15
16
<input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit
</div>
17
18
19
<div>
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered">
</div>
20
21
22
23
<div>
▼
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled>
</div>
24
25
26
27
<div>
28
<label></label>
<input type="button" id="convert" value="Convert" />
</div>
29
30
31
</main>
<script src="convert_temp.js"></script>
</body>
</html>
32
33
34
L: 1 C: 1
HTML :
Unicode (UTF-8) :
Windows (CRLF) :
Saved: 6/27/21, 3:36:00 PM
883 / 105 / 34 Q -
100% :

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.