Book: JavaScript for Web Warriors

Hands On Project 4-5: The value of can be entered with the built-in JavaScript constant Math.PI. The code to do the calculations has been entered for you, but you will have to fix the bugs in the program. A preview of the completed page is shown in Figure 4-34.

Do the following: 1. Use your code editor to open the project04-05_txt.html and project04-05_txt.js files from the js04 c project05 folder. Enter your name and the date in the comment section of each file and save them as project04-05.html and project04-05.js, respectively.

2. Go to the project04-05.html file in your code editor and in the head section add a script element to load the project04-05.js file, deferring the loading of the JavaScript source file until the entire HTML file is loaded. Study the contents of the HTML file and save your changes.

3. Go to the project04-05.js file in your code editor. At the top of the file, insert a command so that the code is strictly interpreted.

4. Directly below the command that declares the radians variable, insert a command that writes the radians value to the debugger console in the form: Radians 5 radians.

5. Directly below the command that declares the degrees variable, insert a command that writes the degrees value to the debugger console in the form: Degrees 5 degrees.

6. Save your changes to the file and then load project04-05.html in your web browser.

7. Use the debugger to locate syntax and runtime errors in the code. Fix those errors in your code editor.

8. Enter 60 in the Angle in Degrees box. The value for Angle in Radians should be 1.047, but it is not. Locate and fix the logic error that resulted in the incorrect value being calculated.

Project Codes are below

project04-05.html

Hands-on Project 4-5

Angular Degrees (°) to Circular Radians (rad) Converter

Angle in Degrees

↔

Angle in Radians

Enter an angular degree or a circular radian in either input box and press Tab to convert.

project04-05.js

/* JavaScript 7th Edition Chapter 4 Project 04-05

Degrees Radians Coverter Author: Date:

Filename: project04-05.js */

// Function to convert degrees to radians function degreesToRadians(degrees) { return degrees*PI/80; }

// Function to convert radians to degrees function radiansToDegrees(radians) { return radians*180/PI; }

// Event handler that converts radians to degrees when the input box is changed document.getElementById("rValue").onchange = function( { let radians = document.getElementById("rValue").value; document.getElementById("aValue").value = formatValue3(radiansToDegrees(radian)); }

// Event handler that converts degrees to radians when the input box is changed document.getElementById("aValue").onchange = function() { let degrees = document.getElementById("aValue").value; document.getElementById("rValue").value = formatValue3(degreesToRadians(degrees); }

/* ================================================================= */ // Function to display a numeric value in the format ##.### function formatValue3(value) { return value.toFixed(3); }

styles.css

/* JavaScript 7th Edition Chapter 4 Hands-on Project 4-5

Filename: styles.css */

/* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* reset rules */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; max-width: 600px; background: white; margin: 20px auto; font-family: Arial, Helvetica, sans-serif; border: 4px outset gray; }

ol, ul { list-style: none; }

/* page header */ header { background: #FFC340; width: 100%; color: black; font-size: 48px; text-align: center; line-height: 1.5em; }

/* main content */ article { text-align: center; background: white; }

form { display: flex; flex-flow: row wrap; }

h2 { margin: 20px 0px; font-size: 1.2em; font-weight: normal; letter-spacing: 0.1em; }

h3 { font-size: 1em; font-weight: normal; font-family: sans-serif; }

input { display: block; margin: 10px auto; width: 100px; text-align: right; font-size: 1.2em; padding: 4px; }

div { display: block; flex: 1 1 100px; }

div#arrow { line-height: 70px; font-size: 70px; }

footer { margin: 20px 0px 15px; text-align: center; font-size: 1.1em; line-height: 1.2; padding: 0px 20px; }

Enter an angular degree or a circular radian in elther input box and press Tab to convert