Use your code editor (Such as: Notepad or the Text Editor within the "Hands-on-Practices") to open the project02-01_txt.
Posted: Fri Jun 10, 2022 11:55 am
Use your code editor (Such as: Notepad or the Text Editor within
the "Hands-on-Practices") to open the project02-01_txt.html and
project02-01_txt.js files from the js02 ► project01 folder. Enter
your name and the date in the comment section of each file and save
them as project02-01.html and project02-01.js, respectively. Go to
the project02-01.html file in your code editor and in the head
section add a script element to load the project02-01.js file.
Include the defer attribute to defer loading the external script
file until the entire page is loaded. Study the contents of the
HTML file and then save your changes. Go to the project02-01.js
file in your code editor. Create a function named
FahrenheitToCelsius() containing a single parameter named degree.
Insert a statement that returns the value of degree minus 32 and
then divided by 1.8. Create a function named CelsiusToFahrenheit()
containing a single parameter named degree. Insert a statement that
returns the value of degree multiplied by 1.8 plus 32. Add an
onchange event handler to the element with the id “cValue”. Attach
an anonymous function to the event handler and within the anonymous
function do the following: Declare a variable named cDegree equal
to the value of the element with the id “cValue”. Set the value of
the element with the id “fValue” to the value returned by the
CelsiusToFarenheit() function using cDegree as the parameter value.
Add an onchange event handler to the element with the id “fValue”.
Attach an anonymous function to the event handler and within the
anonymous function do the following: Declare a variable named
fDegree equal to the value of the element with the id “fValue”. Set
the value of the element with the id “cValue” to the value returned
by the FarenheitToCelsius() function using fDegree as the parameter
value. Save your changes to the file. Open project02-01.html in
your web browser. Verify that when you enter 45 in the Temp in box
and press Tab a value of 113 appears in the Temp in Verify that
when you enter 59 in the Temp in box and press Tab a value of 15
appears in the Temp in box. Please take screenshots of your work.
Please submit your file and screenshots for grading.
HTML code
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 7th Edition
Chapter 2
Hands-on Project 2-1
Author: Ashly Burdick
Date: 05/20/2022
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 2-1</title>
<link rel="stylesheet" href="styles.css"
/>
<script src="project02-01.js"
defer></script>
</head>
<body>
<header>
<h1>Hands-on Project
2-1</h1>
</header>
<article>
<h2>Fahrenheit (° F) to Celsius
(° C) converter</h2>
<form>
<div>
<h3>Temp in
° F</h3>
<input type="number"
id="fValue" value="32" />
</div>
<div
id="arrow">↔</div>
<div>
<h3>Temp in
° C</h3>
<input type="number"
id="cValue" value="0" />
</div>
</form>
<footer>
Enter a Fahrenheit or Celsius
temperature in either input box and press Tab to convert.
</footer>
</article>
</body>
</html>
the "Hands-on-Practices") to open the project02-01_txt.html and
project02-01_txt.js files from the js02 ► project01 folder. Enter
your name and the date in the comment section of each file and save
them as project02-01.html and project02-01.js, respectively. Go to
the project02-01.html file in your code editor and in the head
section add a script element to load the project02-01.js file.
Include the defer attribute to defer loading the external script
file until the entire page is loaded. Study the contents of the
HTML file and then save your changes. Go to the project02-01.js
file in your code editor. Create a function named
FahrenheitToCelsius() containing a single parameter named degree.
Insert a statement that returns the value of degree minus 32 and
then divided by 1.8. Create a function named CelsiusToFahrenheit()
containing a single parameter named degree. Insert a statement that
returns the value of degree multiplied by 1.8 plus 32. Add an
onchange event handler to the element with the id “cValue”. Attach
an anonymous function to the event handler and within the anonymous
function do the following: Declare a variable named cDegree equal
to the value of the element with the id “cValue”. Set the value of
the element with the id “fValue” to the value returned by the
CelsiusToFarenheit() function using cDegree as the parameter value.
Add an onchange event handler to the element with the id “fValue”.
Attach an anonymous function to the event handler and within the
anonymous function do the following: Declare a variable named
fDegree equal to the value of the element with the id “fValue”. Set
the value of the element with the id “cValue” to the value returned
by the FarenheitToCelsius() function using fDegree as the parameter
value. Save your changes to the file. Open project02-01.html in
your web browser. Verify that when you enter 45 in the Temp in box
and press Tab a value of 113 appears in the Temp in Verify that
when you enter 59 in the Temp in box and press Tab a value of 15
appears in the Temp in box. Please take screenshots of your work.
Please submit your file and screenshots for grading.
HTML code
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 7th Edition
Chapter 2
Hands-on Project 2-1
Author: Ashly Burdick
Date: 05/20/2022
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 2-1</title>
<link rel="stylesheet" href="styles.css"
/>
<script src="project02-01.js"
defer></script>
</head>
<body>
<header>
<h1>Hands-on Project
2-1</h1>
</header>
<article>
<h2>Fahrenheit (° F) to Celsius
(° C) converter</h2>
<form>
<div>
<h3>Temp in
° F</h3>
<input type="number"
id="fValue" value="32" />
</div>
<div
id="arrow">↔</div>
<div>
<h3>Temp in
° C</h3>
<input type="number"
id="cValue" value="0" />
</div>
</form>
<footer>
Enter a Fahrenheit or Celsius
temperature in either input box and press Tab to convert.
</footer>
</article>
</body>
</html>