PROBLEM DESCRIPTION

A GUI $($Graphical User Interface$)$ is required to process travel agency services and produce accurate

results. Radio buttons and text boxes will be used for input and output purposes. A button will be

used for processing data. Another button will be employed to clear the text boxes and radio

buttons.

Create a web page to implement the interface required using the JavaScript programming

language. The illustration below displays the format of the GUI screen required.

The original rules about the logic required are listed below:

A travel agency offers a variety of different packages for visiting several regions in Spain.

Each package includes accommodations for a certain number of nights at a hotel within the region

being visited.

To increase the amount of customers using this agency to travel, the agency has started to

offer premium packages that come with extra benefits.

$$ Length of trip:

$$ Hotel accommodations cost $$200$ per day

$$ A trip length of $7($or more$)$ days will receive a $10\%$ discount on hotel costs

$$ Transportation and tour guide services:

$$ Rent transportation vehicle $$150$ per day

$$ Private tour guide $$200$ per day

$$ At the end of the purchase, two levels of premium packages will be offered, Silver or Gold.

$$ Customers can choose either one $($or none$)$ of the two.

$$ Silver premium packages cost $$100$ and provide a $10\%$ discount on transportation

and tour guide services

$$ Gold premium packages cost $$200$ and provide a $20\%$ discount on all purchases $($in$-$

cluding the package cost$)$

Inputs:

Number of Days: Integer

Transportation Vehicle: Yes or No

Tour Guide: Yes or No

Premium Package: Yes or No

Premium Type: Silver or Gold

Outputs:

Total price $($pre$-$tax$).$

Discount.

Sales Tax amount to be added to the bill $(7\%$ rounded to two decimals$).$

Final Cost of the bill $($including the tax$).$

Processing:

$$ Process button:

$$ 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

included in their onclick properties.

$$ It will process the inputs gathered by the text box and radio buttons to perform

the appropriate calculations and generate the required results.

$$ The code for the Process button should not include the prompt or alert

functions

$$ It will place the required results on the appropriate output boxes.

$$ Example of the syntax for 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 $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