Santiago Canyon College


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:

  1. 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.

  2. Add controls like I show you below and name them like I have indicated.

  3. Be sure to change the id and value attributes of all the controls.

  4. You may use an external .js file and an external CSS file if you want to.

  5. Your project must calculate the total due after inserting data into the form.

  6. 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.

  7. Feel free to add more features or do something more exotic!



5.    Suggested properties for the controls. Feel free to be creative!



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"