A3 – Auto Price with Options


Gain experience writing a program that involves simple calculations in JavaScript.

This program is intended to provide you with experience using forms, check boxes, labels, and command buttons. And don't forget the CSS.


Overview

Write a program that displays the MSRP for a Ford Focus and then allows the user to select various options from check boxes. When the "Calculate Total" command button is pressed a script will add up the MSRP, option prices, destination charge, and rebates, calculate and display the tax, add approximated title and fees, and display the total. It is similar (but much simpler than) the Kelley Blue Book page.


Part I: Create the form

Add the form fields on the screen shot below to your page.

Auto Price Calculator

Your form fields should include the following:

  • A labeled text field for the initial MSRP.
  • Four checkboxes for the options.
  • A labeled text field for destination charge.
  • A labeled text field for rebate.
  • A labeled text field for taxes.
  • A labeled text field for title and fees.
  • A button labeled "Calculate Total".
  • A labeled text field for title and fees.

For more information on checkboxes, see this link.

Your form should look as much like the screenshot as possible.


Part II: Writing the Scripts

Write whatever functions you need to implement the following.


Start by creating a function to set the initial value of your MSRP, destination charge, rebate, taxes (to 8%), and title and fees using code. Use these values:

Item Value
MSRP $16,290.00
Destination Charge $695.00
Rebate -$1000.00
Taxes 8%
Title and Fees $37.00
  • These are stored in text fields.
  • Set the readonly property of these fields to readonly. That's not a typo. It looks something like this:
  • <input id="txtMSRP" type="text" readonly="readonly"/>
  • Feel free to remove the borders from these text fields with:
  • style="border-style:none"
  • Call this function from the onload event of the body tag

Once you set the value of the MSRP you have to wait until the user selects their desired options and clicks the Calculate Total button. So the bulk of your scripting is going involve writing a specialized function that will be invoked (or started) when the user clicks the button. Clicking the button is referred to as a "click event".

  • Your script for the click event should first read the MSRP from the MSRP label, strip the formatting (provided below), and store it in a variable. Create a variable called "total" and set it to the MSRP that you just obtained.
  • Next, check to see if the first checkbox is checked. If it is, add its value to total. Then do the same with the second checkbox, then the third, and so forth.
  • When you have processed all the checkboxes you will then read the destination fee, strip the formatting, and add it to the total. Do the same for the rebate.
  • The tax is a little different. You are given a tax rate (use 8%,) which you need to convert to 0.08 and then multiply it by the total (so far) to get the tax, which is output to the tax field. Then add that tax to the total.
  • Finally you need to read the title and license fees, strip the formatting, and add that figure to the total. (You calculated tax first because state fees are not taxed.) You now have the final total. You can format it with formatCurrency (provided below) and display it in a textbox.
  • The total cost should be displayed in a textbox.

Summary of Calculations:

Variable Calculation
MSRP Read from form
total = MSRP
+ option 1 (if checked)
+ option 2 (if checked)
+ option 3 (if checked)
+ option 4 (if checked)
+ destination fee
– rebate
+ (0.8 * total)
+ title and fees


Useful Functions

Here are some useful functions that you can copy from here and paste into your assignment.

stripFormatting

The first is a function to strip formatting associated with currency.

  • Note that the label for MSRP has a value like $15,000.00. That is NOT a number. You want to read 15000.00.

//------------------------------------------------------------------------
// This function will strip dollar signs and
// commas from numeric strings. For example,
// "$1,000.00" becomes 1000.00.
//------------------------------------------------------------------------
function stripFormatting(str)
{
   return +str.replace(/[^\d\.-]/g,'');
}


formatCurrency

You also need something to do the opposite, i.e., format a value as currency. What if you have 15000.00 and want to print it as a currency value like $15,000.00? This function will allow that:

//------------------------------------------------------------------------
// Found on the Internet. Not the clearest code in the world
// but it works. Formats a value with leading dollar sign
// and commas every three positions. And a decimal point.
//------------------------------------------------------------------------
function formatCurrency(numberToFormat)
{
   var dblNumberToFormat;
   var positiveNum;
   var intCents;
   var strCents;

   // convert numberToFormat to string in order to remove $, etc.
   numberToFormat = numberToFormat.toString().replace(/\$|\,/g,'');

   // convert string version of value back to a double value
   dblNumberToFormat = parseFloat(numberToFormat);

   // get the absolute value of the value
   absDblNumberToFormat = Math.abs(dblNumberToFormat);

   // if value is equal to absolute value of value, then set positive to true
   positiveNum = (dblNumberToFormat == absDblNumberToFormat);

   // use floor to round the adjusted value DOWNWARDS to the nearest integer
   dblNumberToFormat = Math.abs(Math.floor(dblNumberToFormat*100+0.50000000001));

   // use modulus 100 to get cents
   intCents = dblNumberToFormat % 100;

   // convert cents to string
   strCents = intCents.toString();

   // use floor to round the adjusted value DOWNWARDS to the nearest integer
   // to get the portion to the left of the decimal
   dblNumberToFormat = Math.floor(dblNumberToFormat / 100).toString();

   // if cents is less than 10 cents, append a 0 to the front of the cents string
   if (intCents < 10)
   {
      strCents = "0" + strCents;
   }

   // no clue what this is doing
   for (var ctr = 0; ctr < Math.floor((dblNumberToFormat.length - (1 + ctr)) / 3); ctr++)
   {
      dblNumberToFormat = dblNumberToFormat.substring(0,dblNumberToFormat.length - (4 * ctr + 3)) + ',' +
         dblNumberToFormat.substring(dblNumberToFormat.length - (4 * ctr + 3));
   }
   return (((positiveNum) ? '' : '-') + '$' + dblNumberToFormat + '.' + strCents);
}

How do you call a function like formatCurrency? In the assignment you want to display your final total in a textbox. If the textbox has an id="txtTotal" then the following code will do so:

txtTotal.value = formatCurrency(total);


Useful Tips


Functions

Remember that user-defined functions are generally placed inside <script> </script> tags in your html header (meaning between the <head></head> tags).

Functions follow this format:

function functionName()
{
   // programming statements belong here
}

Make sure your function name is indicative of the function purpose.

Be sure to include the () (open parenthesis and close parenthesis) after the function name, and place all function statements between curly brackets.



Comments

Be sure that your code is documented thoroughly, i.e., carefully comment your script like the example.

In all programs you should include a comment block at the beginning or your program with your name, the assignment number, and a brief description of the purpose of the program.

You should embed comments in your code whenever the purpose of subsequent lines may be unclear to reviewers.


Odds & Ends

The interface should look as much as possible like the screenshot above.

Test the program on multiple browsers.

Be sure to use CSS to style your page and include either the XHTML Transitional or the XHTML Strict DOCTYPE.

Please refer to the grading rubric for grading details.