Question

Summary

Lewis wants you to write another script that shows a table of events at the Lyman Hall Theater over the next two weeks from the current date. He has already created three arrays for use with the script:

• The eventDates array containing a list of dates and times at which theater events are scheduled.
• The eventDescriptions array containing the description of those events.
• The eventPrices array containing the admission prices of those events.

Lewis has already written the page content and provided style sheets for use with the page. Your job will be to write a script that selects the events that occur in the two-week window from the current date and display them in the web page.

A preview of the home page is shown above.

The style sheets and graphic files have already been created for you. Your job is to write the HTML markup.

Instructions

This Review Assignment contains interactive instructions that you can complete to ensure you've completed the instruction correctly.

After reading each instruction thoroughly, perform the requested change in the code editor to the right. You can use the Build Website button to refresh your website preview at any point and view a full-page version of your website by clicking the arrow in the top right corner of your website preview.

After you've completed an instruction, click the corresponding check box in your list of instructions. This will trigger simulated tests of your website to ensure that you successfully completed the instruction.

Click Next Step to get started!

Setup

Enter your name and the date in the comment section of lht_events.html and lht_table.js.

Link JS Files

Open the lht_events.html file and directly above the closing </head> tag, insert script elements that link the page to the lht_list.js and lht_table.js files in that order. Defer the loading and running of both script files until after the page has loaded.

You will not be tested on this instruction, but you should still complete this step.

Event List

Scroll down the document and directly after the closing </article> tag insert a div element with the ID eventList. It is within this element that you will write the HTML code for the table of upcoming theater events.
(Hint : Be sure to review this file and all the support files, noting especially the names of variables that you will be using in the code you create.)

Variables

Go to the lht_table.js file and below the comment section, declare a variable named thisDay containing the date August 30, 2018. You will use this date to test your script.

Create a variable named tableHTML that will contain the HTML code of the events table. Add the text of the following HTML code to the initial value of the variable:

<table id='eventTable'>
<caption>Upcoming Events</caption>
<tr><th>Date</th><th>Event</th><th>Price</th></tr>

Lewis only wants the page to list events occurring within 14 days after the current date. Declare a variable named endDate that contains a Date object that is 14 days after the date stored in the thisDay variable.

(Hint : Use the new Date() object constructor and insert a time value that is equal to thisDay.getTime() + 14 x 24 x 60 x 60 x 1000.)

For Loop

Create a for loop that loops through the length of the eventDates array. Use i as the counter variable.

Within the for loop insert the following commands in a command block:

• Declare a variable named eventDate containing a Date object with the date stored in the i entry in the eventDates array.
• Declare a variable named eventDay that stores the text of the eventDate date using the toDateString() method.
• Declare a variable named eventTime that stores the text of the eventDate time using the toLocaleTimeString() method.
• Insert an if statement that has a conditional expression that tests whether thisDay is ≤ eventDate and eventDate ≤ endDate. If so, the event falls within the two-week window that Lewis has requested and the script should add the following HTML code text to the value of the tableHTML variable.

<tr>
<td>  eventDay  @  eventTime  </td>
<td>  description  </td> 
<td>  price  </td>
</tr> 

• Where eventDay is the value of the eventDay variable, eventTime is the value of the eventTime variable, description is the i entry in the eventDescriptions array, and price is the i entry in the eventPrices array.

HTML Table Code

After the for loop, add the text of the HTML code </table> to the value of the tableHTML variable.

Insert the value of the tableHTML variable into the inner HTML of the page element with the ID eventList.

<!DOCTYPE html>

<html>

<head>

<!--

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 10

Review Assignment

Lyman Hall Theater Upcoming Events

Author:

Date:

Filename: lht_events.html

-->

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Upcoming Events at the Lyman Hall Theater</title>

<link href="lht_reset.css" rel="stylesheet" />

<link href="lht_styles.css" rel="stylesheet" />

<link href="lht_events.css" rel="stylesheet" />

</head>

<body>

<header>

<img src="lht_logo2.png" alt="The Lyman Hall Theater" id="logoimg" />

<nav> <a id="navicon" href="#"><img src="lht_navicon2.png" alt="" /></a>

<ul>

<li><a href="#">home</a></li>

<li><a href="#">events</a></li>

<li><a href="#">box office</a></li>

<li><a href="#">facilities</a></li>

<li><a href="#">directions</a></li>

<li><a href="#">contact</a></li>

</ul>

</nav>

</header>

<section>

<article>

<h1>At the Theater</h1>

<p>Great shows are coming to the Lyman Hall Theater in the upcoming weeks.

The Broadway Touring Company of <a href="#">Cabaret</a> arrives for four

performances, featuring Tony-award winning actress Kayla

James. Tickets are limited, so be sure to <a href="#">order

online</a> and by calling the LHT boxoffice.

</p>

<p>Enjoy a stunning multimedia event with Edward Lee's <a href="#">Visions

of Light and Dreams</a> featuring sound, video, and interactive

demonstrations of the latest innovations in film and theater.

</p>

<p>If music is more your passion, LHT welcomes the popular group

<a href="#">San Diego Blues</a>. Want an evening of laughs?

Get your tickets now for <a href="#">Gerry Jones</a> and his

one-person show, <a href="#">Exit Stage Left</a>.

</p>

<p>For an inexpensive night out, be sure to check out LHT's

<a href="#">Classic Cinema</a> and for a delicious Sunday

brunch, join us for <a href="#">Classics Brunch</a>.

</p>

</article>

</section>

<footer>

<nav>

<ul>

<li><a href="#">Staff</a></li>

<li><a href="#">Employment Info</a></li>

<li><a href="#">Directions &amp; Parking</a></li>

</ul>

<ul>

<li><a href="#">Box Office</a></li>

<li><a href="#">Group Rates</a></li>

<li><a href="#">Events</a></li>

</ul>

</nav>

<section>

The Lyman Hall Theater<br />

414 Leeward Drive<br />

Brookhaven, GA 30319<br />

Office: (404) 555 - 4140

</section>

</footer>

</body>

</html>

Answer 1

Working code implemented in HTML, CSS & JS and appropriate comments provided for better understanding.

Here I am attaching code for all files:

• lht_events.html
• lht_events.css
• lht_reset.css
• lht_styles.css
• lht_table.js
• lht_list.js

lht_events.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Upcoming Events at the Lyman Hall Theater</title>
<link href="lht_reset.css" rel="stylesheet" />
<link href="lht_styles.css" rel="stylesheet" />
<link href="lht_events.css" rel="stylesheet" />
<script src="lht_list.js" defer></script>
<script src="lht_table.js" defer></script>
</head>

<body>
<header>
<img src="lht_logo2.png" id="logoimg" />
<nav> <a id="navicon" href="#"><img src="lht_navicon2.png" /></a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">events</a></li>
<li><a href="#">box office</a></li>
<li><a href="#">facilities</a></li>
<li><a href="#">directions</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>

<section>
<article>
<h1>At the Theater</h1>   
<p>Great shows are coming to the Lyman Hall Theater in the upcoming weeks.
The Broadway Touring Company of <a href="#">Cabaret</a> arrives for four
performances, featuring Tony-award winning actress Kayla
James. Tickets are limited, so be sure to <a href="#">order
online</a> and by calling the LHT boxoffice.
</p>
<p>Enjoy a stunning multimedia event with Edward Lee's <a href="#">Visions
of Light and Dreams</a> featuring sound, video, and interactive
demonstrations of the latest innovations in film and theater.
</p>
<p>If music is more your passion, LHT welcomes the popular group
<a href="#">San Diego Blues</a>. Want an evening of laughs?
Get your tickets now for <a href="#">Gerry Jones</a> and his
one-person show, <a href="#">Exit Stage Left</a>.
</p>
<p>For an inexpensive night out, be sure to check out LHT's
<a href="#">Classic Cinema</a> and for a delicious Sunday
brunch, join us for <a href="#">Classics Brunch</a>.
</p>
</article>
<div id="eventList"></div>

</section>

<footer>
<nav>
<ul>
<li><a href="#">Staff</a></li>
<li><a href="#">Employment Info</a></li>
<li><a href="#">Directions &amp; Parking</a></li>
</ul>
<ul>
<li><a href="#">Box Office</a></li>
<li><a href="#">Group Rates</a></li>
<li><a href="#">Events</a></li>
</ul>
</nav>
<section>
The Lyman Hall Theater<br />
414 Leeward Drive<br />
Brookhaven, GA 30319<br />
Office: (404) 555 - 4140
</section>
</footer>

</body>

</html>

lht_events.css:

@charset "utf-8";

table#eventTable {
margin-top: 30px;
width: 100%;
font-size: 0.75em;
border-collapse: collapse;
}

table#eventTable td, table#eventTable th {
padding: 5px;
vertical-align: top;
border: 1px solid rgb(0, 127, 243);
}

table#eventTable caption {
font-size: 2em;
letter-spacing: 0.03em;
margin: 0px 0px 10px;
color: rgb(101, 101, 131);
}

table#eventTable th {
background-color: rgb(0, 78, 228);
color: white;
font-weight: normal;
}

table#eventTable tr:nth-of-type(even) {
background-color: rgb(182, 219, 248);
}

table#eventTable tr:nth-of-type(odd) {
background-color: rgb(255, 215, 190);
}

lht_reset.css:

@charset "utf-8";

article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}

address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, nav a, ol, p, section, span, ul,
table, tr, td, th, col, colgroup {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Set the default page element styles */

body {
line-height: 1.2em;
}

ul, ol {
list-style: none;
}

nav ul {
list-style: none;
list-style-image: none;
}

nav a {
text-decoration: none;
}

lht_styles.css:

@charset "utf-8";

html {
background: rgb(151, 151, 221);
font-family: Verdana, Geneva, sans-serif;
height: 100%;
}

body {
background-color: white;
box-shadow: rgb(51, 51, 51) 10px 0px 40px, rgb(51, 51, 51) -10px 0px 40px;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin: 50px auto;
min-width: 400px;
max-width: 1024px;   
width: 100%;
}

/* Header styles */

header {
background: rgb(47, 121, 209);
}

header img#logoimg {
display: block;
width: 100%;
}

/* Navigation list styles */

header nav ul {
width: 100%;
}

header nav ul li {
font-size: 1em;   
}

header nav ul li a {
color: white;
display: block;
padding: 5px 20px;
width: 100%;
}

header nav ul li a:hover {
color: rgb(234, 195, 160);
}

a#navicon {
display: none;
}

/* Section Styles */

section {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

/* Article Styles */

article {
-webkit-flex: 1 1 250px;
flex: 1 1 250px;   
margin: 20px;
}

article h1 {
color: rgb(0, 81, 226);
font-family: "Times New Roman", Times, serif;
font-weight: normal;
font-size: 2.5em;
letter-spacing: 0.03em;
line-height: 1.2em;
margin-bottom: 20px;
text-align: center;
}

article p {
line-height: 1.5;
margin-bottom: 15px;
font-size: 0.85em;
}

article p em {
color: rgb(154, 64, 3);
}

/* Event List Style */

div#eventList {
-webkit-flex: 1 1 350px;
flex: 1 1 350px;   
margin: 20px;
}

/* Footer styles */   

footer {
clear: both;
color: white;
background: linear-gradient(to bottom, rgb(7, 142, 244), rgb(41, 41, 41));
font-size: 0.7em;
font-style: normal;
width: 100%;
margin-top: 20px;
}

footer nav ul, footer section {
float: right;
padding: 10px 30px;
width: 20%;
}

footer section {
float: left;
padding: 5px 30px 25px;
width: 40%;
}

footer nav ul a {
color: white;
}

footer nav ul a:hover {
text-decoration: underline;
}

footer::after {
display: table;
content: "";
clear: both;
}

/* ===============================
Mobile Styles: 0px to 640px
===============================
*/
@media only screen and (max-width: 640px) {

body {
margin: 0px;
}

a#navicon {
display: block;
}

header nav {
padding-bottom: 5px;
}

header nav ul {
display: none;
}

header nav ul li {
font-size: 1em;
line-height: 1.3em;
height: 1.3em;
}

a#navicon:hover+ul, header nav ul:hover {
display: block;
}

header img#logoimg {
width: 100%;
}

article h1 {
font-size: 1.8em;
}

div#calendar {
width: 100%;
margin: 10px 0px;
}   

footer nav ul, footer section {
font-size: 1.2em;
width: 100%;
}
}

/* =============================================
Tablet and Desktop Styles: greater than 640px
=============================================
*/
@media only screen and (min-width: 641px) {
  
header nav ul {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: center;
justify-content: center;
}

header nav ul li {
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
}

lht_table.js:

"use strict";

var thisDay = new Date("August 30, 2018");
var tableHTML = "<table id='eventTable'>" +
"<caption>Upcoming Events</caption><tr><th>Date</th>" +
"<th>Event</th><th>Price</th></tr>";
  
var endDate = new Date(thisDay.getTime()+14*24*60*60*1000);

// Loops through the eventDates array

for (var i=0;i<eventDates.length;i++){
var eventDate = new Date(eventDates[i]);
var eventDay = eventDate.toDateString();
var eventTime = eventDate.toLocaleTimeString();
  
if (thisDay <= eventDate && eventDate <= endDate){
tableHTML = tableHTML + '<tr><td>' + eventDay + ' @ ' + eventTime + '</td><td>' + eventDescriptions[i] + '</td><td>' + eventPrices[i] + '</td></tr>';
}
}

tableHTML = tableHTML + '</table>';
document.getElementById('eventList').innerHTML = tableHTML;

lht_list.js:

"use strict";

var eventDates = ["July 29, 2018 11:00:00", "July 30, 2018 19:00:00", "July 31, 2018 19:30:00",
"August 2, 2018 19:00:00", "August 3, 2018 20:00:00", "August 4, 2018 19:30:00",
"August 5, 2018 11:00:00", "August 6, 2018 19:00:00", "August 8, 2018 19:00:00",
"August 9, 2018 19:30:00", "August 10, 2018 19:30:00", "August 11, 2018 19:30:00",
"August 12, 2018 11:00:00", "August 14, 2018 19:00:00", "August 15, 2018 19:30:00",
"August 16, 2018 19:30:00", "August 17, 2018 19:30:00", "August 18, 2018 19:30:00",
"August 19, 2018 11:00:00", "August 20, 2018 19:00:00", "August 22, 2018 18:00:00",
"August 23, 2018 19:00:00", "August 24, 2018 20:00:00", "August 25, 2018 20:00:00",
"August 26, 2018 11:00:00", "August 28, 2018 18:00:00", "August 29, 2018 18:00:00",
"August 31, 2018 19:30:00", "September 1, 2018 19:00:00", "September 2, 2018 11:00:00",
"September 4, 2018 19:00:00", "September 5, 2018 19:00:00", "September 6, 2018 19:00:00",
"September 7, 2018 19:00:00", "September 8, 2018 19:00:00", "September 9, 2018 11:00:00",
"September 10, 2018 19:00:00", "September 12, 2018 20:00:00", "September 13, 2018 20:00:00"];

var eventDescriptions = ["Classics Brunch", "Lasers and Light", "Dixieland Jazz Masters",
"Classic Cinema: Wings", "The Future is Prologue", "American Favorites",
"Classics Brunch", "LHT Jazz Band", "Civic Forum", "Hamilton", "Hamilton",
"Hamilton", "Classics Brunch", "Hacking your Dreams", "Hamilton", "Hamilton",
"Hamilton", "Hamilton", "Classics Brunch", "What Einstein Got Wrong",
"Governor's Banquet", "Classic Cinema: City Lights", "Stardust Memories",
"Summer Concert", "Classics Brunch", "Childrens Shakespeare", "Kids Fair",
"Have Spacesuit, Will Travel", "Cabaret", "Classics Brunch",
"Visions of Light and Dreams", "San Diego Blues", "Cabaret", "Cabaret",
"Cabaret", "Classics Brunch", "Classic Cinema: Safety First", "Exit Stage Left", "Antonio Perez"];

var eventPrices = ["$12", "$12/$18/$24", "$22/$31/$47", "$5", "$18/$24/$36", "$24/$36/$48", "$12", "$24",
"free", "$48/$64/$88", "$48/$64/$88", "$48/$64/$88", "$12", "free", "$48/$64/$88",
"$48/$64/$88", "$48/$64/$88", "$48/$64/$88", "$12", "free", "by invitation", "$5",
"$24/$36/$48", "$16/$24", "$12", "free", "free", "$22/$36/$48", "$48/$64/$88", "$12",
"$18/$32", "$24/$36", "$48/$64/$88", "$48/$64/$88", "$48/$64/$88", "$12", "$12",
"$18/$28/$36", "$32/$48/$64"];

Sample Output Screenshots: