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
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.