Create two web pages and two data files. One web page will be a product page, and the other will be a contact us page. One of the data files will be hardcoded and will contain the product information that will display on the product page. The other data file will be created dynamically and will store the order information containing the users selections on the product page. Details for the product page, contact us page, and the data files are listed below.

Product Page - Name this page product_abc.htm. You will need to include the company name at the top with the logo image to the right of the company name (consistent with the other pages). The colors, font styles, etc. should be handled with external CSS. Only minimal inline styling is acceptable and only when necessary to override styling from the external CSS file.

At a minimum, you must meet the following requirements:

The title on this page should be - Products

H1 heading - to display at the top of the page.

Sort options above the product information to allow the user to sort the products by:

Product ID - Ascending

Product ID Descending

Product Name Ascending

Product Name - Descending

Product Price Ascending

Product Price _Descending

All products must be listed in an organized fashion on the page and should be sorted by Product Name in ascending order when the page loads. Pull the product information for the products (you need at least 10) from the data source file, which you will create yourself. You will need to show an image for each product (no sort option will exist for the image column), a product ID, product name/description, and price. You will also provide an input element for each product in which the user may specify a Quantity to purchase (allow only whole numbers greater than or equal to 0).

Submit and Cancel buttons at the bottom of the page

Submit Confirms with the message, Are you sure you want to order the following: (each item with a quantity > 0 should be listed in a separate line in the confirmation dialog box). If confirmed, create another data file containing the product ID and quantity for each product that has a quantity > 0. If the user does not confirm, no action is necessary.

Clear confirms with the message, Are you sure you want to cancel your selections? If confirmed, clear the selected quantities. If the user does not confirm, no action is necessary.

Contact Us Page Name this page contact_abc.htm . You will need to include the company name at the top with the logo image to the right of the company name (consistent with the other pages). You will also need to include the following contact information under the company name (also to the left of the image):

company name

full physical address (you may use any address)

phone number

fax number

customer service email address

Google map with driving directions (the map may appear to the right or below the other page content (wherever you deem appropriate, as long as its near the address and large enough to show clearly on the page). This should be embedded into your page from Google Maps.

Product Data File - You will need to create a data file containing all product information, which will be housed on your server. All products should be related to your product theme. Include an image, product ID, product name/description, price for each product. This will be used to populate the product information on your product page. For uniformity, each image must have the same dimensions when loaded in the page.

Menu You will need to create a uniform menu that appears on your home page, your new product page, and your new contact us page. The menu needs to allow navigation between these three pages.

Navigation The user should be able to navigate between the home, product, and contact us pages using the menu, but they will navigate to the Survey page only if they are selected to participate in the survey. If selected, display a confirm window to inform them they have been selected and to ask them if they would like to participate (this confirm window will replace the current alert window). If the user confirms, display the survey. If not, do nothing.