Create a sales$\_$tax.html code for this Lab

This is our first JavaScript application.

Open the files for the Sales Tax application

$1.$ Download the attached zip file for the lab.

$2.$ Start your browser, and open the page sales$\_$tax.html:

$3.$ Enter valid numeric values in the first two input boxes and click the Calculate

button. Notice that nothing happens.

$4.$ Use your Visual Studio Code to open the salex$\_$tax.html$.$ Open the

sales$\_$tax.js file for this application from there. Then, notice that this file only

contains the $ function that's used to get the object for an HTML element.

$5.$ Open the sales$\_$tax.html file for this application. Then, note the ids that are

used for the text boxes for this application.

Start the event handlers for this application

$1.$ Start the event handler for the window.onload event by entering this code:

window.onload $=$ function $()\{$

alert $("$This is the window.onload event handler."$)$;

$\}$

Then, save the file, switch to browser, click the Reload button, and note the

message that's displayed. Or$,$ if nothing happens, check your code, fix it$,$ and

try this again.

$2.$ Between the $ function and the window.onload event handler, start a

function named calculate$\_$click by entering this code:

var calculate$\_$click $=$ function $()\{$

alert $("$This is the calculate$\_$click event handler."$)$;

$\}$

Then, save the code, switch to Firefox, click the Reload button, and note that

this function isn't executed. That's because it hasn't been called. Now, switch

to your editor.

$3.$ Call the calculate$\_$click function from the window.onload event handler by

entering this statement after the alert statement:

calculate$\_$click$()$;

Then, save the file, switch to browser, and click the Reload button. This time,

two message boxes should be displayed: one by the window.onload event

handler and one by the calculate$\_$click function. If this doesn't work, fix the

code and try it again. Then, switch to your editor.

$4.$ Assign the calculate$\_$click function to the click event of the Calculate button

by replacing the statement you entered in step $3$ with this statement:

$$("$calculate$").$onclick $=$ calculate$\_$click;

Then, save the file, switch to browser, click the Reload button, and click on

the Calculate button. If you did everything right, the two message boxes are

again displayed. Otherwise, fix the code and try again. Then, switch to your

editor.

Finish the calculate$\_$click event handler

After you do each of the steps that follow, switch to Firefox, click the Reload button,

and make sure your changes work. Otherwise, fix your code and try again.

$1.$ Add these statements after the alert statement in the calculate$\_$click

function:

var subtotal $=200$;

var taxRate $=7\mathrm{.}5$;

var salesTax $=$ subtotal $*($taxRate $/100)$;

var total $=$ subtotal $+$ salesTax;

alert $($ "subtotal $="+$ subtotal $+"$

$"+$

"taxRate $="+$ taxRate $+"$

$"+$

"salesTax $="+$ salesTax $+"$

$"+$

"total $="+$ total$)$;

$2.$ Then, experiment with any statements that you don't understand in the

calculate$\_$click function. To display the results of your statements, you can

use alert statements as in step $2.$

$3.$ Replace the statements that you entered in step $2$ with these statements:

var subtotal $=$ parseFloat$($ $$("$subtotal$").$value $)$;

var taxRate $=$ parseFloat$($ $$("$taxRate$").$value $)$;

$//$ calculate results

var salesTax $=$ subtotal $*($taxRate $/100)$;

salesTax $=$ parseFloat$($ salesTax.toFixed$(2))$;

var total $=$ subtotal $+$ salesTax;

$//$ display results

$$("$salesTax$").$value $=$ salesTax;

$$("$total$").$value $=$ total.toFixed$(2)$;

The first two statements will get the user entries; the last two statements will

display the results. At this point, the application should work if the user enters

valid numbers.

$4.$ Comment out the two alert statements by entering slashes before them.

$5.$ Check the user entries for validity by entering this code with the statements

that do the calculations in the else clause:

if $($ isNaN$($subtotal$)||$ isNaN$($taxRate$))\{$

alert$("$Please check your entries for validity."$)$;

$\}$ else $\{$

$//$ the statements that do the calculations should be here

$\}$

This just checks to make sure that both user entries are numeric before the

calculations are done.

$6.$ At this point, you have a working application. Further, you can check to make

sure that each user entry is both numeric and greater than zero, and you can

display a different error message for each text box. Or$,$ you can add a

statement to the window.onload function that moves the focus to the first

text box. When you're through experimenting, close the files