Insy 4315 Project 2 Create A Document That Complies With The

Insy 4315project 2create An Html Document That Complies With The Minim

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 browser's width.
• Anchor element with no text (see instructions below for assigning the text to the anchor element).
• At least 1 additional image that coincides with your company/product theme (which may be used wherever/however you like).
• At least one other content item of your choice to enhance your home page, provided it does 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:
• type = “email”
• placeholder = “for example, [email protected]”
• 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

Your code should check whether a cookie exists when the page loads. If it does not, display the specified text in the div and anchor elements (see provided document text). If the cookie exists, display the stored name in the div and anchor, updating the anchor text to allow changing the name.

When the page loads, check if the cookie exists. If not, show prompt text in the anchor to ask for the user's name. When the user clicks the anchor, a prompt appears for entering the name. If OK is clicked, save the name in a cookie (expires in 7 days), update the div with a welcome message including the name, and hide the anchor. If Cancel is clicked, no change occurs.

If the cookie already exists when the page loads, show the name from the cookie in the div and update the anchor text to allow changing the name.

Additionally, 5 seconds after the body loads, generate a random number, multiply it by 10, round up, and if the number is a multiple of 5, display an alert message indicating the user has been selected for a survey. When the user clicks OK, display the survey page from Assignment #1.

Use the provided document text snippets for the content that appears in various states (welcome message, prompt message, alert message).

Paper For Above instruction

/ Inline override styles if needed, for example: /

body {

font-family: Arial, sans-serif;

}

h1 {

text-align: center;

}

Thank you for choosing Sunrise Coffee Creations

// Function to get cookie by name

function getCookie(name) {

const value = "; " + document.cookie;

const parts = value.split("; " + name + "=");

if (parts.length === 2) return parts.pop().split(";").shift();

}

// Function to set cookie

function setCookie(name, value, days) {

const d = new Date();

d.setTime(d.getTime() + (days2460601000));

const expires = "expires="+ d.toUTCString();

document.cookie = name + "=" + value + ";" + expires + ";path=/";

}

// Initialize page

window.onload = function() {

const nameDiv = document.querySelector('#name-link');

const cookieName = 'username';

let userName = getCookie(cookieName);

const nameLink = document.getElementById('name-link');

if (!userName) {

// Cookie does not exist

nameDiv.textContent = 'Want a more personalized experience on our website?';

nameLink.textContent = 'Please click here to provide your name';

nameLink.onclick = function(e) {

e.preventDefault();

const nameInput = prompt('Please enter your name:');

if (nameInput !== null && nameInput.trim() !== '') {

setCookie(cookieName, nameInput.trim(), 7);

alert('Welcome, ' + nameInput.trim() + '! We hope you will enjoy your Sunrise Coffee Creations experience!');

updateDisplay(nameInput.trim());

}

};

} else {

// Cookie exists

updateDisplay(userName);

}

// 5 seconds after load, generate random number and alert if needed

setTimeout(function() {

const rand = Math.random();

const multiplied = Math.ceil(rand * 10);

if (multiplied % 5 === 0) {

alert('You have been randomly selected to participate in a customer satisfaction survey.');

// Show survey page without actual submission

window.location.href = 'survey.html';

}

}, 5000);

};

function updateDisplay(userName) {

const nameDiv = document.querySelector('#name-link');

nameDiv.textContent = 'Welcome, ' + userName + '! We hope you will enjoy your Sunrise Coffee Creations experience!';

const nameLink = document.getElementById('name-link');

nameLink.textContent = 'Please click here if you are not ' + userName;

nameLink.onclick = function(e) {

e.preventDefault();

const nameInput = prompt('Please enter your name:');

if (nameInput !== null && nameInput.trim() !== '') {

setCookie('username', nameInput.trim(), 7);

alert('Welcome, ' + nameInput.trim() + '! We hope you will enjoy your Sunrise Coffee Creations experience!');

updateDisplay(nameInput.trim());

}

};

}