Vegas Tour JS Phase 2

Learning Objectives:

This assignment is designed to practice:

• Creating functions
• Calling functions
• Creating and initializing arrays
• Creating and using loops
• Using Number() function to ensure values are treated as numbers and not strings
• Using concatenation to add currency or percent symbols
• Using toFixed(2) method to round to 2 decimal places 8. Reading and understanding the use of comments

PROBLEM DESCRIPTION

The Las Vegas Tour company has decided to perform enhancements to the current version of their Processing program in order to use it to process groups of customers. The company has decided to provide a simpler package to small groups of 3 customers. Lodging and tour packages will no longer be required. The prices have been lowered also.

This requires a change to the user interface and to the program. In addition to radio buttons to select Destination and Air Travel option, three buttons will be used: Process Group, Generate Report and Clear. More details about them are provided in the Requirements section.

You will have to create some arrays and functions for the buttons to work as intended.

You are required to implement the interface required using the JavaScript programming language. The illustration below displays the GUI screen required. A template is provided to you with the basic structure of the interface.

Note: Choose a background

Figure: see image.

The new pricing list is listed below:

Destination:

Bellagio

• Air Travel:
  • First Class: $550
  • Economy: $275

Wynn

• Air Travel:
  • First Class: $650
  • Economy: $310

Inputs needed (refer to the illustration on the previous page):

Destination: Bellagio or Wynn.
Air Travel: First Class or Economy.

Outputs to be displayed (refer to the illustration on the previous page):

• Total Price
  • The total price calculated prior to the addition of 8% resort fee.
• Final price
  • Note: add 8% to the total price to calculate the final price.

Other Output: A Report with the details for the group. It's generated when calling the generateReport function by clicking on the Generate Report button.

Requirements:

Radio Buttons for Destination and Air Travel option:

• They will be used to record the choices of the customers. These choices must be saved in arrays rather than on regular variables.
• Therefore, three arrays need to be declared inside the < script> section of the program (the < script> section should be placed inside the < head> section):
  • destination: an array to hold destination for each customer (size 3).
  • airTravel: an array to hold the air travel option for each customer (size 3).
  • prices: an array to hold the total price for each customer (size 3).
• The Destination and Air Travel option for Customer 1 should be stored in the first element of the destination and airTravel arrays, respectively.
• The Destination and Air Travel option for Customer 2 should be stored in the second element of the destination and airTravel arrays, respectively.
• The Destination and Air Travel option for Customer 3 should be stored on the third element of the destination and airTravel arrays, respectively.

Process Group button: it is clicked on to process a group of customers.

It will take care of the following tasks:

• It will calculate price for each customer based on the data in the destination and airTravel arrays.
  • Tip: use a loop to calculate the price for each customer, storing the results in the prices array.
• It will calculate the total price for the group based on the data in the prices array.
  • Tip: use a loop to add up the values in the prices array.
• It will calculate the final price (total price plus 8% resort fee).
• It will display the total price and final price on the output text boxes.

Functions

Creating the functions

Two functions are required to initialize the arrays.

• A function to initialize a text array (array whose elements will be strings). This function will be used to initialize the arrays that will contain destinations and air travel options. Tip: Use a loop to initialize the elements of an array with empty strings.
• Another function to initialize numeric arrays. This function will be used to initialize the arrays that will contain prices for each customer. Tip: Use a loop to initialize the elements of an array with zeros.

They will require only one parameter for each of them. The argument passed to this parameter will be an array.

• Their function definitions should be added inside the < script> section of the program. This < script> section should be placed inside the < head> section.

Calling the functions

• The initialization functions should be called inside the
• Call twice the function that initializes text arrays:
  • with the destination array as argument.
  • with the airTravel array as argument.
• Call once the function that initializes numeric arrays.
  • with prices array as argument.

Buttons:

Generate Report button:

The Generate Report button will call the generateReport function when it is clicked on. The Generate Report button will produce a report with the details of the group processed. (Note: a group of customers needs to be processed first before generating the report).

The generateReport function is provided inside the generateReportFunction.js file.

• Download and then open the generateReportFunction.js file with a text editor
• Copy and paste the function definition included in the file mentioned to the < script> section of the program.

The generateReport function requires the following arguments in the following order:

• destinations array (name of the array the contains the destinations for the customers)
• air travel array (name of the array that contains the air Travel options for the customers)
• prices array (name of the array that contains the prices for the customers)

Clear button: clears all the radio buttons and text boxes. It also resets the variables and the arrays. The same function to initialize the arrays may be used to reset the arrays.

SAMPLE TRACE THROUGH THE CORRECT ALGORITHM

Additional Information:

Be sure to include a comment with your name and section in the part of your HTML code program.

Since the content of a text box which requires a number may be used in mathematical operations, use the function Number() to ensure that the numeric input is treated as numeric data. Syntax example:

numericVariable = Number(myBoxID.value)

Syntax example to round up a number to 2 decimals. Just add .toFixed(2) to the variable name containing the number.

someNumber.toFixed(2)

You will use several variables in this program.

It is good practice to also store the tax rate (0.07) in a variable.

Examples related to radio buttons (these are examples, the name, id and onclick content should be related to your code):

Using radio buttons:

< input type="radio" name="size" id="large" onclick="sizeData="L"">
< input type="radio" name="size" id="small" onclick="sizeData='S"">

In the example above, the two associated radio buttons, load the appropriate value to the variable sizeData based on the user's selection.

Clearing radio buttons:

The radio buttons in the previous example may be cleared by using the following syntax in a program:

large.checked = false;
small.checked = false;

Notice that the IDs of the radio buttons are used when clearing a radio button.