Vegas Tour JS Phase 1

Learning Objectives:

This assignment is designed to practice:

• Creating an Event Driven JavaScript program.
• Using Input Elements such as text boxes, buttons, and radio buttons in an event driven program
• Implement JavaScript code which will respond to user events.
• Use of variables: declaration, initialization, modification
• Use of arithmetic and/or logical operators.
• Use of comments.

PROBLEM DESCRIPTION

The Las Vegas Tour company wishes to create a GUI (Graphical User Interface) to price its tour packages for customers. Radio buttons and text boxes are needed for input and output purposes. Buttons will be used for processing data.

You are required to create a webpage to implement the interface required using the JavaScript programming language. The illustration below displays the GUI screen required.

Figure: see image.

Note: Choose a background color and a text color of your preference

As a reminder, the pricing list is listed below:

Destination:

Bellagio

• Air Travel:
  • First Class: $600
  • Economy: $300
• Hotel: $300 per night
• Tour:
  • High Roller package: $1,500
  • Basic package: $600

Wynn

• Air Travel:
  • First Class: $700
  • Economy: $350
• Hotel: $400 per night
• Tour:
  • High Roller package: $1,800
  • Basic package: $650

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

Destination: Bellagio or Wynn.
Air Travel: First Class or Economy.
Hotel: Number of nights.
Tour: High Roller or Basic.

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

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

Processing:

Process button:

• It will read the content of the Hotel Nights text box.
  • Example of reading from text box: myVariable = myTextBoxID.value; It loads the content of the text box whose ID is myTextBoxID into the variable myVariable.
  • Notice that the Process button does not need to "read" the radio buttons since the radio buttons take care of loading the appropriate value to the variables involved.
• It will process the data from the Hotel Nights text box as well as the data from the radio buttons and generate the totals required.
• It will also place the results for the totals on the appropriate output boxes.
  • Example of writing to a text box: myTextBoxID.value = myVariable; It writes the content of the variable myVariable to the text box whose ID is myTextBoxID.

Clear button:

• It will reset all variables
  • The numeric variables should be set to 0
  • The string (text) variables should be set to the empty string.
• All the text boxes should be loaded (written to) with the empty string to clear them of any content.
• It will also clear all the radio buttons (see examples on the last page).

SAMPLE TRACES THROUGH THE CORRECT ALGORITHM

Additional Information:

Be sure to include a comment with your name and section in the < head> 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 store the resort fee (0.08) 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.