The problem

Construct a web page to sell admission to a museum. The page will include some input elements where the user can specify what ticket they want to purchase. Each time the user clicks the Purchase button the page will add their purchase to a table displayed below the input elements.

A paragraph at the bottom of the page will also display the total cost of the items purchased.

When the page first opens and no tickets have been purchased you should hide the division of the page that shows the table and then total.

You will show this division again as soon as the user clicks the purchase button to purchase their first ticket.

Here is the table of ticket prices for the museum.

MemberNonmember
Youth$5.50$6.50
Adult$7.50$9.50

Requirements and suggestions

For this assignment you must use both jQuery and Bootstrap. To use Bootstrap you should download a copy of the bootstrap.min.css file from bootswatch.com and place it in your project folder. Link this css file into your page. You can find details on how to use Bootstrap to style input elements in these lecture notes. To style the table with Bootstrap you should apply the Bootstrap table class to your table element.

You must also use jQuery for all of the DOM code in your project, including finding elements, getting values from elements, and setting the text content of elements.

Finally, I am also going to require that you write a function with the following structure:

function admission(age,member)

This function has two parameters, the age category for the ticket ('youth' or 'adult') and the member status for the ticket ('member' or 'nonmember'). The function should return the admission charge for that combination.

To format the dollar amounts for display in the table and the paragraph at the bottom of the page you should use the text formatting code I showed in an earlier lecture. Here again is that code:

formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
  });
    
textForm = formatter.format(cost);

Due date

This assignment is due by the start of class on Friday, April 26.