Question

HTML / CSS

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 requirements)

*These elements should be formatted to "match" those at the top of the survey page.

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:

Thank You for Choosing Sunrise Coffee Creations Sunrise Coffee Creations is a family-owned establishment located in Dallas, TX. We are dedicated to bringing our customers the best coffee products available. From whole beans to finely-ground espressos, we offer the highest-quality coffee around. Come into one of our coffee shops and enjoy our relaxing, friendly atmosphere. Would you rather shop in the comfort of your own home? No problem. Sit back, relax, and shop our products online. Either way, we feel confident you will enjoy the great service and products we provide Want a more personalized experience on our website? Please click here to provide your name Figure 1 h1 element div element anchor element

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

If the user clicks the anchor element (as shown above), display a prompt window asking for the user’s name. When the user provides his/her name, update the second div element with the appropriate “welcome” text, store the name in a cookie file, and remove the text from the anchor element (please see Figure 2).

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

Document Text

You may copy these blocks of text into your document where applicable, but be sure you have added any necessary special characters (like the Registered Trademark symbol) and style settings as shown in the provided screen shots.

h1

Thank you for choosing Sunrise Coffee Creations®

div (when cookie does exists)

Welcome, . We hope you will enjoy your experience!.

div (when cookie does not exist)

Want a more personalized experience on our website?

a (when cookie does exists)

Please click here if you are not .

a (when cookie does not exist)

Please click here to provide your name.

Alert message (show this message 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 prompt if the user clicks the anchor element)

Please enter your name:

Answer 1

This html code for home page:

home.html(write your content in <p></p> tag)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>home.html</title>
<style>
body {background-color:   #FFA07A;
}
</style>
</head>
<body >
<center>
<h1>Thank you for choosing Sunrise Coffee Creations®</h1>
</center>

<div style="float: right; clear: left;" id="main" align="right" style="width: 300px; height: 400px;">
<img src="coffee1.jpg" height="300" />
</div>

<div align="left" style="color:#FF4500">
<p> We are a local non-profit community that sells rummage items.</p>
<p> This week we are selling pens to sell in order to raise money. </p>
<p> As of now we have run out of all items except for our pens. </p>
<h4> Product Information: </h4>
<p> Pens come in 10 packs with 5 in blue ink, 5 in black ink.<br /> Ballpoint pens
weighing in at 11.6 grams with attached comfort grips, good for use in the office or in school! </p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p></p>

</div>

<div id="main" align="left" style="width: 300px; height: 400px;">
<img src="coffee2.jpg" height="300" />
  
</div>

<div style="float: right; clear: left;" id="main" align="right">
<p align="left"> Want a more personalized experience on our website?</p>
<p align="left" > <a href="login.html"> Please click here to provide your name. </a><p>
</div>

</body>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script language="javascript" type="text/javascript" >

function testJS()
{

var b = document.getElementById('name').value

document.getElementById('here').innerHTML = b;

}
</script>
</head>
<body>
<form action="profile.html">
Enter Your Name:<input type="text" id="name">
<input type="submit" id="print" onClick="testJS()" >

</form>
</body>
</html>

profile.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>home.html</title>
<style>
body {background-color:   #FFA07A;
}
</style>
<script type="text/javascript">
function testJS()
{

var b = document.getElementById('name').value

document.getElementById('here').innerHTML = b;

}
</script>
</head>
<body >
<center>
<h1>Thank you for choosing Sunrise Coffee Creations®</h1>
</center>

<div style="float: right; clear: left;" id="main" align="right" style="width: 300px; height: 400px;">
<img src="coffee1.jpg" height="300" />
</div>

<div align="left" style="color:#FF4500">
<p> We are a local non-profit community that sells rummage items.</p>
<p> This week we are selling pens to sell in order to raise money. </p>
<p> As of now we have run out of all items except for our pens. </p>
<h4> Product Information: </h4>
<p> Pens come in 10 packs with 5 in blue ink, 5 in black ink.<br /> Ballpoint pens
weighing in at 11.6 grams with attached comfort grips, good for use in the office or in school! </p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p></p>

</div>

<div id="main" align="left" style="width: 300px; height: 400px;">
<img src="coffee2.jpg" height="300" />
  
</div>

<div style="float: right; clear: left;" id="main" align="right">
<p align="left"><br id="here"></br> Welcome, Joe we hope you will enjoy your sunrise coffee creation experiance! </p>

</div>

</body>

</html>

Output:

園Java EE-http://localhost8081/CheggReservationSystem/home.html-Eclipse File Edit Navigate Search Project Run Window Help 饴| | E? Java EE Java拳Debug Quick Access home htmllogin htmlprofile. htmlhome.html 3 ー母 叱1 や→ @ 운 | http://localhost:8081/CheggReservationSystern/home.html Ih ank you for choosing Sunrise Coffee Creations R We are a local non-profit community that sells rummage items. This week we are selling pens to sell in order to raise money As of now we have run out of all items except for our pens Product Information Pens come in 10 packs with 5 in blue ink, 5 in black ink Ballpoint pens weighing in at 11.6 grams with attached comfort grips, good for use in the office or in school! Done