Programming

by


INSY 4315

Project 2

 

Create an HTML document that complies with the minimum requirements below:

 

Content Requirements

 

Create a home page with the following elements and settings:

  • Set the background, font colors, and “theme” to match those used in lab assignment #1 using an external css file; inline styling should be used only where necessary to override styling from the external css
  • H1 element, centered at the top of  the page, with “Thank you for choosing Your Company Name. . . “ text*
  • Div or other container with at least 5 sentences containing information about your company (e.g., company philosophy, history, information about products, mission statement, etc.).  This should occupy 70% of the browser’s width*
  • Image with your company’s logo appearing to the right of the div element (use the same logo image you used in project 1); this should appear to the right side of the div*
  • A second Div or other container element with a width set to 70% of the browsers width (see instructions below for information on assigning the text to the div element)
  • Anchor element with no text (see instructions below for information on assigning the text to the anchor element)
  • At least 1 additional image that coincides with your company/product theme (this may be used wherever/however you like)
  • At least one other content item of your choice to enhance your home page (as long as they do not conflict with the minimum requirements)

 

*These elements should be formatted to “match” those at the top of the survey page from Project 1.

 

Make the following changes to the survey page from Assignment #1:

  • Add validation to require data values for all “Personal Information” and “Opinion Statement” responses.
  • For the email input, set the following attribute values:
  • If you used checkboxes for the age ranges in Project 1, change them to radio buttons or a select element (to ensure only 1 selection is made).

 

Coding Requirements

Write code that will first check to see if a cookie exists when the page loads.  If the cookie does not exist, show the correct text in the div and anchor elements (you may paste from the “Document Text” section below).  For example:

 

anchor element
div element
h1 element

 

When the page loads, check to see if a cookie exists.  If it does not, display text on the anchor element to prompt the user to provide their name. When the user clicks the anchor element to provide the name, display a prompt window so the user may enter the information.  If the user clicks OK, store it in a cookie file (set to expire in 7 days), update the div element with the appropriate “welcome” text, and remove the text from the anchor element to hide it.  For example:

Updated div

Figure 3

 

Note:  If the user clicks Cancel on the dialog box, make no changes to the page.

 

If the cookie does exist when the page loads, show the name from the cookie in the div and anchor elementand update the text on the anchor to allow the user to

change the name. For example:

Updated div and anchor

Figure 3

 

In addition, 5 seconds after the body loads, generate a random number.  Multiply the random number by 10 and round up to the nearest whole number.  If the rounded number is a multiple of 5, display the appropriate alert message to indicate the user has been selected for a survey (please see “Document Text” section below for the correct message).   For example:

 

Alert message

Figure 4

When the user clicks the OK button, display the survey page from Assignment #1 (no coding is required at this time to actually “submit” the survey).

Document Text

You may copy these blocks of text into your document where applicable, but be sure you have added anynecessary style settings.

  • h1
    • Thank you for choosing Sunrise Coffee Creations

 

  • div (when cookie doesexists)
    • Welcome, <user name goes here>.  We hope you will enjoy your <company name goes here>experience!.

 

  • div (when cookie does not exist)
    • Want a more personalized experience on our website?

 

  • a (when cookie doesexists)
    • Please click here if you are not <user name goes here>.

 

  • a (when cookie does not exist)
    • Please click here to provide your name.

 

  • Alert message (show this if the rounded random number * 10 is a multiple of 5)
    • You have been randomly selected to participate in a customer satisfaction survey.

 

  • Prompt message (show this if the user clicks the anchor element to provide his/her name)
    • Please enter your name:

 

Submit the Assignment

Make sure you have saved your web page as “index.htm” and saveyour web pagefiles and your image file in a folder named “4315_Lab1_abc1234” (where abc1234 represents your NetID).  Zip the folder and submit it through the assignment link provided in Canvas.