Posted: February 21st, 2023

HTML

INSY 4315 – 001
Assignment #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)
• Any other elements you wish to use 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:
o type = “email”
o placeholder = “for example, Joe@abc.com”
• If you used checkboxes for the age ranges in Project 1, change them to radio buttons (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:

When the user clicks the anchor element to provide his/her name, display a prompt window asking for the user’s name. When the user provides his/her name, store it in a cookie file (set to expire in 7 days), update the second div element with the appropriate “welcome” text, and remove the text from the anchor element. For example:

Figure 2

If the cookie does exist when the page loads, show the correct text in the div and anchor elements (you may paste from the “Document Text” section below), including the name from the cookie. For example:

Figure 3

In addition, 5 seconds after the body loads, generate a random number. Multiply the random number by 10 and round 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:

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 any necessary style settings.
• h1
o Thank you for choosing Sunrise Coffee Creations

• div (when cookie does exists)
o Welcome, . We hope you will enjoy your experience!.

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

• a (when cookie does exists)
o Please click here if you are not .

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

• Alert message (show this if the rounded random number * 10 is a multiple of 5)
o 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)
o Please enter your name:

Submit the Assignment
Make sure you have saved your web page as “4315_Lab2_abc1234.htm” where abc1234 represents NetID. Put the web page file and your image files 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.