INSY 4315
Assignment #3
Create three new web pages and two JSON data files. One web page will be a “Product” page, one will be a “Contact Us” page, and one will be an “About Us” page. One of the JSON files will be hardcoded and will contain the product information that will display in the product page. The other JSON file will be created dynamically and will store the order information containing the user’s selections on the product page. Details for the product page, contact us page, about us page, and the data files are listed below.
Product Page – Name this page product_abc.htm (where abc represents your initials). 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 match those used in your previous lab assignments and 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 “
• H1 heading – to display “
• H2 heading – to display “Our Products”
• Sort options above the product information to allow the user to sort the products by:
o Product ID – Ascending
o Product ID – Descending
o Product Name – Ascending
o Product Name – Descending
o Product Price – Ascending
o Product Price _Descending
• All products must be put in a table and should be sorted by Product ID 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
o Submit – Confirms with the message, “Are you sure you want to order the following:
o Reset – 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 (where abc represents your initials). 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 Survey and Contact Us pages). You will also need to include the following information under the company name (also to the left of the image):
• H2 heading – to display “Contact Us”
• Div with the following contact information:
o company name
o full physical address (you may use any UTA address)
o phone number
o fax number
o 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 it’s near the address and large enough to show clearly on the page). This should be “embedded” into your page from Google Maps.
About Us Page – Name this page about_abc.htm (where abc represents your initials). 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 Survey and Contact Us pages). You will also need to include the following information under the company name (also to the left of the image):
• H2 heading – to display “About Us”
• Brief company history (at least one paragraph)
• Mission Statement (one paragraph)
• Info about key people in the organization (you should have at least 3 people listed):
o Name
o Picture
o Title
o Brief Bio
Product Data File – You will need to create a JSON data file containing all product information, which will be housed on your “server” (using Chrome Server). All products should be related to your product theme. Include an image name, product ID, product name, description, price for each product. This will be used to populate the product information on your “product” page. For uniformity, product data must be entered into a table and each image must have the same dimensions (you should crop your images if necessary).
Menu – You will need to create a uniform menu that appears on all of your pages (home page, product page, contact us, and about us page). The menu needs to allow navigation between these four pages. Make sure your home page (index.html) opens when the website is launched.
Navigation – The user should be able to navigate between the Home, Product, Contact Us, and About Us pages using the menu, but they will navigate to the Survey page (from Lab Assignment 1) only if they are selected to participate in the survey (via the randomly-generated number criteria from Assignment 2). If selected, display a “confirm” dialog box 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 from Project 2). If the user confirms, display the survey. If not, do nothing.
Your grade will be based on your adherence to the requirements, overall appearance and design, and ease-of-use.
Submission Instructions
All files (.htm, .css, .js, .json, and image files) must be saved in a single folder named “Lab3_abc” (where abc represents your initials). Zip the folder and upload it to Canvas in submissions page of the assignment. All submissions must be received by 11:59 PM on the due date to avoid a late penalty. Late work will accrue a 20-point penalty per day that it’s late.
Product Page Example:
Contact Us Page Example:
