CW3

The specified external JavaScript file is linked to homepage. (index.html, Line 12)

Besides that, there are two more JavaScript files written by me:

• homepage.js - JavaScript for homepage
• order.js - JavaScript for order page

All JavaScript content is stored externally; no inline or embedded script is included.

Event Handlers

Event handlers are registered in different ways in this website:

HTML attribute

• Video switching in homepage: onended attribute set to switchVideo() in HTML. (index.html, Line 85 and homepage.js, Line 48)

Event handler attribute set by JavaScript

• Form submit button in homepage: onclick attribute set to validateForm by JavaScript. (homepage.js, Line 33)
• Menu and label switching in the order page: label onclick attribute set to switchMenu by JavaScript. (order.js, Line 16)

addEventListener

• "Add" buttons in the order page menu: adding click event listener to tableAdd. (order.js, Line 25)
• Undo link in the order page: adding click event listener to tableRemove. (order.js, Line 29)

CW2

Position Scheme

This website use a mixture of positioning to better fit the content.

Most of the elements use the default static positioning.

Below is a brief explanation of other meaningful positioning used in this website:

relative positioning

• the navigation menu, a child of nav, is positioned lower (relative to its original place) to ensure it is not covered by the navigation icon. (navigation.css, Line 17)
• the form in home page is set to relative to serve as positioning ancestor for the input and select. (see the next item; homepage.css, Line 81)

absolute positioning

the form input and select in home page is positioned with 10% right empty space (relative to the form) to be aligned vertically. This also takes the elements out of normal flow. (homepage.css, Line 98)

fixed positioning

the nav class and the navigation icon is fixed to the top right corner of the browser body. This also takes the elements out of normal flow. (navigation.css, Line 4)

CSS3 Features

Many CSS3 features are introduced in this website, including but not limited to:

Round Corner

• border-radius is used to create round corner for many div elements. (default.css, Line 6, 10)
• border-radius is also used for menu_label in order page, with only topleft and topright corner rounded. (order.css, Line 36)

Box Shadow

box-shadow is used to decorate the form in the homepage. A shadow at the right bottom sides makes the form look like a card. (homepage.css, Line 82)

Transitions

• transition is used to create a color and background color change effect when the mouse hovers over an item in the navigation menu. (navigation.css, Line 40)
• A similar effect (only background color change) is applied for the menu_label in order page. (order.css, Line 37)

Animations

• when the page is loaded, animation makes the navigation icon flys in with rotation, and then rotate for another 360 degrees. (navigation.css, Line 11)
• At the same time, the navigation menu fades in. (navigation.css, Line 27)

Style grouping and Layout

All the CSS content is grouped into 6 files in the /css folder, and HTML files are linked to them.

No inline or embedded style is used in this website.

Below is a brief on how the style is grouped and how the layout is designed:

Common Theme

two sets of border (with different color and style) serve as div-level separation. (default.css, Line 4-11)

header

the common header across the sitee (excluding design.html). Banner and title is centered horizontally and vertically as a whole. (default.css, Line 14-35)

Double Column Layout

used for both index.html and order.html. float is used to create the two columns, which takes up different percentage of the screen width as needed.

• In index.html, the left column is used for the basic information, and the right column is used for the promotion video and the form. (homepage.css, Line 4-12)
• In order.html, the left column is used for the menu, and the right column is used for the order table. (order.css, Line 4-12)

footer

the common footer across the site (excluding design.html). clear is used to clear the float of the two columns, making it start from a new line. (default.css, Line 38-42)

nav

the navigation is fixed to the top right corner of the browser body, and used in all three pages.
Additionally, with media query, the navigation won't be printed out. (navigation.css, Line 3-53)

index.html - Information Block - homepage.css

Different kinds of elements are contained in the information block. Thus, the styling is divided into 4 parts:

• dl, dt, dd: the general style for the data list. (Line 15-29)
• ul, li: style for the list in the Brief Introduction part. Pseudo-element ::marker removes the bullet points and ::first-letter stress the first character. (Line 30-43)
• img: style for the image in the Location part. (Line 44-52)
• a: style for the button following the data list. (Line 53-63)

index.html - Promotion + Form Blocks - homepage.css

The promotion video and booking form are in the same block for double column layout. However, they are also separated into two sub-divs for styling.

• Message before video (Line 66-70), video (Line 71-75)
• Form general style and legend (Line 78-95), Form input (Line 96-102), Submit and reset buttons (Line 103-115)

order.html - Menu Block - order.css

Menu block is only visible on screen. It is hidden on print.

• Line 19-41 is for the three menu labels ("Tickets", "Dinings" and "Hotels"); Line 37-41 specifies the transition of background color when the mouse hovers over the label.
• Line 42-44 hides the menu tabs, which is their default state.
• Line 45-64 is for the style of menu tabs when they are displayed.
• Line 67-94 further specifies the properties (as inline-block) of the menu tabs when they are shown, and more importantly, let them display when the mouse hover over corresponding menu label or on the menu tab.

order.html - Order Item Block - order.css

The following style is only for screen as well.

• Line 97-105 is for the overall style and the messages outside the table.
• Line 106-116 is for table column width and text alignment.
• Line 119-128 is for the undo link.

order.html Printed style

Styling for print is specified in a different file, printOrder.css.

• Line 4-20 is for the header. The width is reduced to the same as table width.
• Line 29-59 is for the ordered item table.
• Line 23-26 is for hiding other blocks.

An alternative explanation in views of files:

default.css

the common theme across the site, for index.html and order.html (for screen).
Including the header and welcome (Line 14-35), footer (Line 38-42) and border style (Line 4-11).

navigation.css

navigation style, for all pages (for screen).
Including the navigation icon (Line 3-15), navigation menu (Line 16-47) and keyframe functions (Line 49-70).

homepage.css

specific style for index.html.
Including the double column layout (Line 4-12), information block (Line 15-63), promotion block (Line 66-75), booking block (Line 78-115).

order.css

specific style for order.html (for screen).
Including the double column layout (Line 4-12), order menu (Line 19-94) and ordered item (Line 97-128).

printOrder.css

specific style for printing the order.html.
All the blocks other than the header and ordered item are not displayed.
These two blocks are also adjusted to fit the print width. Header (Line 4-20), ordered item (Line 29-59).

design.css

specific style for this page, design.html.