JavaScript Programming
Ron Kessler
PROJECT 2:
Data Entry for a simple “Sales Tax Calculator”
(20 pts)
This is due on week 10
Description & Instructions
You are going to build me a simple sales tax calculator. We covered all the ideas/techniques for building this in class. I only have a couple restrictions:
Do not submit a copy of any of my demos. Do your own project!
You must NOT use the automated event behaviors in Expression Web to create your functions!
Create a new
web page and name it something like "TaxCalculator" or something similar and
save it to a new folder for JS Project 2.
Add controls
like I show you below and name them like I have indicated.
Be sure to
change the id and value attributes of all the controls.
You may use an external .js file and an external CSS file if you want to.
Your project must calculate the total due after inserting data into the form.
Although it is not showing in the screen shot, please add a "Clear" button that will call an event handler and clear all text boxes and set the cursor back to the first test box.
Feel free to add more features or do something more exotic!
5. Suggested properties for the controls. Feel free to be creative!
PROPERTY SHEET FOR JavaScript PROJECT 2 |
||
OBJECT | ATTRIBUTE or TAG | Value |
Document title | <title> | Sales Tax Calculator or something similar |
color | set any color | |
background | Choose nice color in CSS file | |
font-family | your choice | |
font-size | your choice | |
Label for subtotal textbox | <label for = "textbox"> | textbox = id of your subtotal textbox |
Label for tax rate textbox | <label for = "textbox"> | textbox = id of your tax rate textbox |
Label for sales tax textbox | <label for = "textbox"> | textbox = id of your sales tax textbox |
Label for total textbox | <label for = "textbox"> | textbox = id of your total due textbox |
Be sure to type in what the labels display | ||
width | 6em | |
Textboxes | id | txtSubTotal , txtTaxRate, etc |
TextAlign | Right | |
Button for calculation | id | btnCalculate |
value | "Calculate" or something similar | |
Button for clearing form | Name | btnClear |
id | "Clear" | |