I have included what direction I have and I have also included all the files tha
ID: 3804297 • Letter: I
Question
I have included what direction I have and I have also included all the files that are needed for this program. It is a program using JavaScript. I am needing the code that goes where it says //Create the code needed here, under the Chapter7.js file.
We will be creating a simple temperature conversion calculator. It will take an input temperature and convert it to either celcius or fahrenheit. Since this chapter is about creating functions, I have created the inital function that will trigger when the button is clicked, along with 2 sample function calls in an if statement that is checking which radio button is selected. You can either use these names or change them to match whatever you call your functions.
You will need 2 functions. 1 of them for converting from F to C and one for converting C to F. You will need to display the calculated temperature in the output div called divResults. You can use the function I have already created for reference to help you. Remember that when working with numbers out of a text box you need to tell JavaScript to treat them as numbers using parseInt or parseFloat, but in this situation we shouldn't be entering decimal points so parseInt is acceptable. The formulas for conversion are listed below:
Fahrenheit to Celcius
C = (F - 32) * (5 / 9)
Celcius to Fahrenheit
F = (C * (9 / 5)) + 32
I have also placed a comment section in the .js file that contains the formulas for quick reference while you work. If you run into trouble, please let me know.
Chapter7.css
body{
margin:0;
background:#333;
}
.main{
width:400px;
height:auto;
background:#fff;
margin:50px auto;
text-align:center;
padding: 25px 0;
}
.main input{
margin:25px 0;
}
Chapter7.html
<!DOCTYPE html>
<html>
<head>
<title>Chapter 7 Temperature Converter</title>
<link href="Chapter7.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<h1>Temperature Converter</h1>
<p>Enter a Temperature to Convert in the field below and select the starting scale.</p>
<input type="text" name="txtTemp" id="txtTemp" placeholder="Enter a Temperature" />
<br />
<br />
<input type="radio" id="radFahrenheit" name="radTemp" checked/>Fahrenheit to Celcius
<br/>
<br/>
<input type="radio" id="radCelcius" name="radTemp"/>Celcius to Fahrenheit
<br/>
<br/>
<br/>
<br/>
<button id="btnConvert">Convert</button>
<br/>
<br/>
<div id="divResults"></p>
</div>
<script src="Chapter7.js"></script>
</body>
</html>
Chapter7.js
// COURSE: CIT 140 JavaScript
// NAME: <YOUR NAME>
// DATE: <DATE>
// PROJECT: Chapter 7 Programming Project
function ConvertTemp(){
var radF = document.getElementById('radFahrenheit');
var radC = document.getElementById('radCelcius');
if(radF.checked){
//Call Function to Convert F to C
FahrenheitToCelcius();
}else if(radC.checked){
//Call Function to Convert C to F
CelciustoFahrenheit();
}
}
//Create your Conversion Functions Below
/* FORUMULAS
*
* Fahrenheit to Celcius
* C = (F - 32) * (5 / 9)
*
* Celcius to Fahrenheit
* F = (C * (9 / 5)) + 32
*/
//Create the code needed here.
//This is the event handler for the button.
function init() {
//Assign the HTML element to a JavaScript variable called btnConvert
var btnConvert = document.getElementById('btnConvert');
//Set the ConvertTemp function above to the onclick event of the button Variable
btnConvert.onclick = ConvertTemp;
}
//Run the INIT function when the page finishes loading.
window.onload = init;
Explanation / Answer
Answer:
<!DOCTYPE html>
<html>
<body>
<p>Enter a number into one of the input fields below:</p>
<p><input id="c"> degrees Celsius</p>
<p><input id="f"> degrees Fahrenheit</p>
<script>
function replace(degree) {
var input;
if (degree == "C") {
input = document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value = Math.round(input);
} else {
input = (document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value = Math.round(input);
}
}
</script>
</body>
</html>