CW3

Event listeners

• Inline HTML event handler: ticket.html line 145.
• JavaScript event handler: index.html line 119, 125.

CW2

Overall theme

Styles

A total of 8 stylesheets are used:

• "reset.css": a CSS reset stylesheet based on Tailwind
• "base.css": the common stylesheet for all pages
• "index.css", "now-showing.css", "ticket.css", "print.css": the stylesheets for specific pages
• "design.css": the stylesheet for the Design page
• "et-book.css": the stylesheet containing the @font-face definition of the font used.

CSS3 features

• Drop shadow: in index.css line 19.
• Flexbox: in base.css line 18.

Acknowledgements

• Casablanca font. Free for personal use.
• et-book font. MIT License.

CW1

Design

This section explains the various design decisions in making the webpages.

Common

a) Header: the <header> element is used for this purpose, as is standard.

b) Main menu for navigation: the <nav> element is used to provide navigation links. It is nested in the <header>, as is common practice.

c) Footer information: the <footer> element is used for this purpose.

Home page

d) Movies and information: the <video> element is used to display the movie, wrapped in a <div> with its information.

e) Now showing and Upcoming: each is a <section> element, and each movie is contained in its own <article>, representing an independent, reusable piece of content.

Now showing

f) Selection box: the <select> and <option> elements are used for the dropdown menu.

g) List of movies: each selection is a <form> containing a <fieldset>, which allows submitting information and separating the selections nicely.

h) Cinema locations: each location is wrapped in an <article> element, representing an independent, reusable piece of content.

Ticket page

j) Headings: the <h3> elements are used in this, as it provide enough emphasis without being too distracting.

k) Seat plan: a <table> element is used for the whole seat plan, with each row describing a row in the layout, and each cell representing a seat.

l) Confirm button: a <form> element containg the selected seats and a <button> that goes to the Print page.

Print page

m) Each ticket is contained in its own <div>, with the texts inside <p> tags.

Acknowledgements

• Information for the movies: Wikipedia. Licensed under CC BY-SA 3.0.
• Images:
  • Logo: Phosphor Icons. Licensed under MIT.
  • Mochi in a Box 2.jpg. Licensed under CC0 1.0.
  • Map images: OpenStreetMap. Licensed under CC BY-SA 2.0.