Create the application describe below. Be sure to follow all of the instructions

ID: 3562724 • Letter: C

Question

Create the application describe below. Be sure to follow all of the instructions provided. Project 8-1: Temperature Converter User interface Web Interface.JPG Operation This application allows the user to select the type of temperature conversion. If the user selects one of the radio buttons, this application disables the text box that's used to display the results of the calculation, it enables the text box that's used to get data from the user, and it removes any data from both text boxes. This application displays the converted temperature in the disabled text box when the user clicks on the Convert button. Specifications The formula for converting temperatures from Fahrenheit to Celsius is: c = (f-32) * 5/9 The formula for converting temperatures from Celsius to Fahrenheit is: f = c * 9/5 + 32 This application should accept decimal entries like 77.5, but it should round the result of the conversion to the nearest integer value. This application should validate data to make sure that the user enters a valid number for the conversion. Note To disable or enable a text box, you can set its disabled property to true or false.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Temperature Converter</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="convert_temp.js"></script>
</head>
<body>
<div id="content">
<h1>Convert temperature</h1>

<input type="radio" name="conversion_type" id="to_celcius" checked="checked" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" />From Celcius to Fahrenheit<br />
<br />

<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" disabled="disabled" class="disabled"/><br />
<br />

<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</body>
</html>

convert_temp.js

var $ = function (id) { return document.getElementById(id); }

default.css

body {
font-family: Arial, Helvetica, sans-serif;
background: #666666;
}

#content {
width: 450px;
margin: 10px auto;
padding: 5px 20px;
background: #FFFFFF;
border: 1px solid #000000;
}

h1 {
font-size: 140%;
}

label {
display: block;
width: 10em;
padding-right: 1em;
float: left;
}

input, label {
display: block;
float: left;
}

.disabled {
color: #000000;
}

br {
clear: left;
}

Explanation / Answer

Each time you load an HTML page, the web browser generates an internal representation of the page in the form of an inverted tree structure. Let us look at a simple form. We will use this form later to demonstrate the use of the getElementById method.

There are elements such as <input/> and containers like <form> </form> Each element can have attributes associated with it, such as:

Here, the <input/> element has three attributes: type, name and id. The id attribute uniquely identifies this particular element.

Accessing Form Elements using getElementById

In order to access the form element, we can use the method getElementById() like this:

The getElementById() call returns the input element object with ID

Navigate

Create the application describe below. Be sure to follow all of the instructions

Create the chunklist class in c++ with the methods stated in the picture. Chunkl

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Create the application describe below. Be sure to follow all of the instructions

Question

Explanation / Answer

Related Questions

Navigate