staadecr/convert_temp.js

## convert_temp.js
"use strict";
var $ = function(id) { return document.getElementById(id); };


var clearTextBoxes = function() {
    $("degrees_entered").value = "";
    $("degrees_computed").value = "";
}

window.onload = function() {
    $("convert").onclick = convertTemp;
    $("to_celsius").onclick = toCelsius;
    $("to_fahrenheit").onclick = toFahrenheit;
    //convert
    $("convert").onclick = convertTemp;
	$("degrees_entered").focus();
	//adding checked values
    $("to_celsius").checked = true;
    $("to_fahrenheit").checked = false;
    //labels
    $("degree_label_1").value = "Enter Fahrenheit Degrees";
    $("degree_label_2").value = "Enter Celsius Degrees";
    clearTextBoxes();
}

/*Code the toFahrenheit function that is executed when the user clicks
on the second radio button. It should change the text in the labels for
the text boxes so they read as in the second interface above. It should
also call the clearTextBoxes function to clear the text boxes.
 */
function toFahrenheit() {
    clearTextBoxes();
    $("degree_label_1").value = "Enter Celsius degrees";
    $("degree_label_2").value = "Degree Fahrenheit";
    $("to_celsius").checked = false;
}

/*Code the toCelsuis function that is executed when the user clicks on
the first radio button. It should change the text in the labels for the
text boxes so they read as in the first interface above. It should also
call the clearTextBoxes function to clear the text boxes.
 */
function toCelsius() {
    clearTextBoxes();
    $("degree_label_2").value = "Enter Fahrenheit degrees";
    $("degree_label_1").value = "Degree Celsisus";
    $("to_fahrenheit").checked = false;
}

/* Code the convertTemp function without any data validation. It should
calculate the temperature based on which button is checked. To convert
Fahrenheit to Celsius, first subtract 32 from the Fahrenheit temperature,
and then multiply that result by 5/9. To convert Celsius to Fahrenheit,
first multiply Celsius by 9/5, and then add 32. The result in either case
should be rounded to zero decimal places.
 */
function convertTemp() {
    var number = $("degrees_entered").value;
    if (number == '' || isNaN(number)) {
        //data validation
        alert("You must enter a valid number for degrees.");
    } else {
        if ($("to_celsius").checked) {
            var fTemparture = $("degrees_entered").value;
            fTemparture = fTemparture - 32;
            fTemparture = fTemparture * 5 / 9;
            $("degrees_computed").value = Math.round(fTemparture);
            $("degrees_computed").focus();

        } else if ($("to_fahrenheit").checked) {
            var cTemparture = $("degrees_entered").value;
            cTemparture = cTemparture * 9 / 5;
            cTemparture = cTemparture + 32;
            $("degrees_computed").value = Math.round(cTemparture);
            $("degrees_computed").focus();
        }
    }
}

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Convert Temperatures</title>
   	<link rel="stylesheet" href="styles.css">
    <script src="convert_temp.js"></script>
</head>

<body>
<main>
    <h1>Convert temperatures</h1>
    <input type="radio" name="conversion_type" id="to_celsius" value=""checked>Fahrenheit to Celsius<br>
    <input type="radio" name="conversion_type" id="to_fahrenheit" value="">Celsius to Fahrenheit<br><br>
    <label id="degree_label_1">Fahrenheit degrees:</label>
    <input type="text" id="degrees_entered" value="" checked><br>
    <label id="degree_label_2">Degrees Celsius:</label>
    <input type="text" id="degrees_computed" value=""><br>
    <label>&nbsp;</label>
    <input type="button" id="convert" value="convert" onclick="convertTemp();"/><br>
</main>
</body>
</html>

## styles.css
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 450px;
    border: 3px solid blue;
}
h1 {
	color: blue;
	margin: 0 0 .5em;
}
main {
    padding: 1em 2em;
}
label {
	float: left;
    width: 10em;
	margin-right: 1em;

}
input {
    margin-bottom: .5em;
}
#convert {
	width: 10em;
}
	"use strict";
	var $ = function(id) { return document.getElementById(id); };


	var clearTextBoxes = function() {
	$("degrees_entered").value = "";
	$("degrees_computed").value = "";
	}

	window.onload = function() {
	$("convert").onclick = convertTemp;
	$("to_celsius").onclick = toCelsius;
	$("to_fahrenheit").onclick = toFahrenheit;
	//convert
	$("convert").onclick = convertTemp;
	$("degrees_entered").focus();
	//adding checked values
	$("to_celsius").checked = true;
	$("to_fahrenheit").checked = false;
	//labels
	$("degree_label_1").value = "Enter Fahrenheit Degrees";
	$("degree_label_2").value = "Enter Celsius Degrees";
	clearTextBoxes();
	}

	/*Code the toFahrenheit function that is executed when the user clicks
	on the second radio button. It should change the text in the labels for
	the text boxes so they read as in the second interface above. It should
	also call the clearTextBoxes function to clear the text boxes.
	*/
	function toFahrenheit() {
	clearTextBoxes();
	$("degree_label_1").value = "Enter Celsius degrees";
	$("degree_label_2").value = "Degree Fahrenheit";
	$("to_celsius").checked = false;
	}

	/*Code the toCelsuis function that is executed when the user clicks on
	the first radio button. It should change the text in the labels for the
	text boxes so they read as in the first interface above. It should also
	call the clearTextBoxes function to clear the text boxes.
	*/
	function toCelsius() {
	clearTextBoxes();
	$("degree_label_2").value = "Enter Fahrenheit degrees";
	$("degree_label_1").value = "Degree Celsisus";
	$("to_fahrenheit").checked = false;
	}

	/* Code the convertTemp function without any data validation. It should
	calculate the temperature based on which button is checked. To convert
	Fahrenheit to Celsius, first subtract 32 from the Fahrenheit temperature,
	and then multiply that result by 5/9. To convert Celsius to Fahrenheit,
	first multiply Celsius by 9/5, and then add 32. The result in either case
	should be rounded to zero decimal places.
	*/
	function convertTemp() {
	var number = $("degrees_entered").value;
	if (number == '' \|\| isNaN(number)) {
	//data validation
	alert("You must enter a valid number for degrees.");
	} else {
	if ($("to_celsius").checked) {
	var fTemparture = $("degrees_entered").value;
	fTemparture = fTemparture - 32;
	fTemparture = fTemparture * 5 / 9;
	$("degrees_computed").value = Math.round(fTemparture);
	$("degrees_computed").focus();

	} else if ($("to_fahrenheit").checked) {
	var cTemparture = $("degrees_entered").value;
	cTemparture = cTemparture * 9 / 5;
	cTemparture = cTemparture + 32;
	$("degrees_computed").value = Math.round(cTemparture);
	$("degrees_computed").focus();
	}
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Convert Temperatures</title>
	<link rel="stylesheet" href="styles.css">
	<script src="convert_temp.js"></script>
	</head>

	<body>
	<main>
	<h1>Convert temperatures</h1>
	<input type="radio" name="conversion_type" id="to_celsius" value=""checked>Fahrenheit to Celsius<br>
	<input type="radio" name="conversion_type" id="to_fahrenheit" value="">Celsius to Fahrenheit<br><br>
	<label id="degree_label_1">Fahrenheit degrees:</label>
	<input type="text" id="degrees_entered" value="" checked><br>
	<label id="degree_label_2">Degrees Celsius:</label>
	<input type="text" id="degrees_computed" value=""><br>
	<label> </label>
	<input type="button" id="convert" value="convert" onclick="convertTemp();"/><br>
	</main>
	</body>
	</html>
	body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;
	margin: 0 auto;
	width: 450px;
	border: 3px solid blue;
	}
	h1 {
	color: blue;
	margin: 0 0 .5em;
	}
	main {
	padding: 1em 2em;
	}
	label {
	float: left;
	width: 10em;
	margin-right: 1em;

	}
	input {
	margin-bottom: .5em;
	}
	#convert {
	width: 10em;
	}