INSTITUTE OF ENGINEERING AND TECHNOLOGY

BHADDAL TECHNICAL CAMPUS , ROPAR

TicketHub (Movie Ticket Booking System)

PROJECT REPORT
BATCH – 2022-2026
SESSION – July 2025-Nov 2025

Submitted by :- Submitted to :-
Chanchal Mr. Dushyant Sharma
Uni. Roll No.- 2204410
Branch – [Link]. CSE
Sem – 7th
 2204410/CSE/2022

INDEX

[Link]. Table of Content Page No. Signature

1. Acknowledgement 2

2. Objective 3

3. Abstract 4

4. Hardware and Software Requirements 5-6

5. System design/ Working Explanation 7-21

6. Features 22-25

7. Code Implementation (HTML, CSS and JS) 26-36

8. Output Description 37

9. Conclusion 38-39

10. References 40

pg. 1
 2204410/CSE/2022

1. ACKNOWLEDGEMENT
I would like to express my sincere gratitude to all those who supported and guided me
throughout the development of this Movie Ticket Booking System using HTML, CSS, and
JavaScript Named as TicketHub. First and foremost, I am deeply thankful to Mr. Dushyant
Sharma, whose valuable insights, encouragement, and constructive feedback were crucial
to the success of this project. I am also grateful to principal sir Dr. Gurpreet Singh IET
Bhaddal for providing this opportunity to carry out the present work I would like to express
my gratitude to other faculty members of the Computer Science & Engineering department
of our college for providing academic input, guidance & Encouragement throughout the
training period.

Finally, I express my indebtedness to all who have directly or indirectly contributed to the
successful completion of my project. This project has been a great learning experience, and I
am thankful to everyone who played a role in its success.

CHANCHAL

Roll No.- 2204410

[Link]. CSE (7th Sem)

pg. 2
 2204410/CSE/2022

2. OBJECTIVE
The primary objective of the Movie Ticket Booking System using HTML, CSS, and JavaScript
is to design and develop a fully functional, user-friendly, and interactive web-based platform
that allows users to browse movies, select show timings, choose seats, and book tickets
efficiently.
The key objectives of this project are:

1. To create an intuitive and responsive user interface

2. To enable dynamic movie listing and filtering

3. To implement user authentication

4. To build an interactive seat selection system

5. To simulate a real-world ticket booking process

6. To enhance user engagement through additional features

7. To strengthen understanding of front-end web development

8. To mimic industry-standard ticketing systems

pg. 3
 2204410/CSE/2022

3. ABSTRACT
The Movie Ticket Booking System is a web-based application developed using HTML, CSS,
and JavaScript with the objective of providing a smooth, user-friendly, and efficient digital
ticket-booking experience. This project replicates the essential functionalities of modern
online ticketing platforms such as browsing movies, selecting theatres, choosing show
timings, reserving seats, applying promotional codes, and simulating payment processes.

The system incorporates a dynamic user interface that displays movies along with genre,
price, and popularity filters. Users can register, log in, and manage their accounts using
browser-based local storage. Additional features such as a wishlist, booking history,
calendar view, and ticket download enhance the overall usability of the application. A multi-
step booking workflow is implemented, including theatre selection, seat layout visualization,
real-time seat validation, and payment method selection.

This project demonstrates practical knowledge of front-end technologies and strengthens

understanding of interactive UI design, event handling, local storage management, and
component-based page structuring. The Movie Ticket Booking System successfully reflects
the core operations of real-world ticketing applications and serves as a comprehensive
learning model for modern web development practices.

pg. 4
 2204410/CSE/2022

4. HARDWARE & SOFTWARE REQUIREMENTS

1. Hardware Requirements

The following minimum hardware specifications are recommended for developing and
running the Movie Ticket Booking System:

Minimum Hardware Requirements

• Processor: 1.5 GHz or higher

• RAM: 2 GB

• Storage: 500 MB of free disk space

• Display: 1024 × 768 resolution

• Input Devices: Keyboard and Mouse

• Output Device: Monitor

• System: Any standard desktop or laptop

Recommended Hardware Requirements

• Processor: 2.0 GHz Dual Core or above

• RAM: 4 GB or higher

• Storage: 1 GB (for project files, tools, browsers)

• Display: Full HD Monitor (1920 × 1080)

• System: Windows / macOS / Linux compatible device

2. Software Requirements

The software stack required for developing and executing the Movie Ticket Booking
System includes:

Frontend Technologies

• HTML5: For creating the structure of the web pages

• CSS3: For styling, layout design, responsiveness, and UI enhancements

pg. 5
 2204410/CSE/2022

• JavaScript (ES6+): For interactivity, dynamic content, seat logic, authentication, and
data handling

Development Tools

• Code Editor:

o Visual Studio Code (Recommended)

o Sublime Text / Notepad++ / Atom (optional)

• Web Browsers:

o Google Chrome (Preferred)

o Mozilla Firefox

o Microsoft Edge

o Any modern browser supporting HTML5, CSS3, and JavaScript

Additional Resources

• Local Storage API: For storing user accounts, bookings, and wishlist

• FontAwesome: For icons

• Google Fonts: For custom typography

• Internet Connection: For loading poster images and external scripts (optional)

pg. 6
 2204410/CSE/2022

5. SYSTEM DESIGN / WORKING EXPLANATION

SYSTEM DESIGN / WORKING EXPLANATION

The Movie Ticket Booking System follows a structured workflow that ensures smooth
interaction between the user and the application. The system design focuses on modularity,
user experience, and efficient data handling. The system operates entirely on the client side
using HTML, CSS, and JavaScript, along with LocalStorage to simulate persistent data. Below
is a detailed explanation of how the system works.

1. Overall System Workflow

The complete movie booking process is divided into three main phases:

A. User Interaction Phase

• User visits the homepage.

• User can browse movies, search, or apply filters.

• User can log in or register to access booking features.

• Wishlist and account management features are available for logged-in users.

pg. 7
 2204410/CSE/2022

B. Booking Phase

• Select a movie → Select theatre → Choose show timing

pg. 8
 2204410/CSE/2022

• Seat selection → Ticket summary calculation → Apply promo code

pg. 9
 2204410/CSE/2022

• Proceed to payment → Select payment method → Confirm booking

C. Ticket Generation Phase

pg. 10
 2204410/CSE/2022

• System generates booking confirmation

• Ticket can be downloaded, printed, or shared

• Booking is stored in LocalStorage for future reference

2. System Components

pg. 11
 2204410/CSE/2022

The system consists of the following modules:

1. User Authentication Module

• Includes Login and Register forms

• Stores users in browser’s localStorage

• Validates user credentials during login

• Updates UI dynamically when user logs in

2. Movie Display Module

• Loads movie data dynamically from JavaScript arrays

pg. 12
 2204410/CSE/2022

• Displays movie poster, title, genre, and price

• Includes wishlist button

• Supports filters:

o Sort by name/price

o Genre filter

o Price range filter

• Includes search functionality

3. Booking Workflow Module

This is the core part of the system and includes:

Step 1: Theatre Selection

• Displays theatre list dynamically

• Each theatre shows address & available showtimes

• User selects theatre and preferred showtime

• System validates the selection before moving to next step

pg. 13
 2204410/CSE/2022

Step 2: Seat Selection

• Generates a theatre seat layout grid dynamically

• Seats have three states:

o Available (light)

o Selected (primary color)

o Occupied (grey)

• User can toggle seats

• System calculates:

o Ticket price

o Convenience fee

o Total price

• Promo code validation

• Summary update in real-time

Step 3: Payment

• User selects a payment method:

pg. 14
 2204410/CSE/2022

o Card

o UPI

o Wallet

o Net banking

• Displays dynamic payment form based on selected method

• Validates user input

• Final confirmation completes booking

pg. 15
 2204410/CSE/2022

4. Ticket Generation Module

• Shows success message after payment

pg. 16
 2204410/CSE/2022

• Provides options:

o Download ticket (PDF)

o Print ticket

o Share booking

o Book another ticket

• Booking details are saved in LocalStorage:

o Movie title

o Theatre

o Timing

o Selected seats

o Amount paid

pg. 17
 2204410/CSE/2022

3. Internal System Design Elements

A. Data Structures

The system uses JSON-like JavaScript objects:

Movies Data

Uses an array of objects like:

id: 1,

title: "Avengers: Endgame",

genre: "Action",

price: 250,

poster: "image link"

User Data

Stored in localStorage:

pg. 18
 2204410/CSE/2022

name: "",

email: "",

username: "",

password: ""

Bookings Data

userId: "",

movie: "",

theatre: "",

showtime: "",

seats: [],

amount: 0

4. Flow of Working (Step-by-Step)

Step 1: System Initialization

• Loads movie list

• Loads events and sports (if applicable)

• Loads user session if logged in

• Updates UI accordingly

Step 2: User Login / Registration

• User clicks login

• Enters credentials

• System verifies data from localStorage

pg. 19
 2204410/CSE/2022

• User dashboard features become available

Step 3: Movie Selection

• User selects a movie card

• System displays booking screen

• Shows movie details and theatre list

Step 4: Theatre & Showtime Selection

• User selects theatre

• Chooses a show time

• “Proceed to Seat Selection” activates

Step 5: Seat Selection Page

• Theatre seats generated using nested loops

• User selects seats

• System updates:

o Selected seat numbers

o Ticket cost

o Convenience fee

o Final total

Step 6: Payment Process

• User chooses a payment option

• Enters required details

• System validates the form

• Confirms booking

Step 7: Ticket Confirmation

• System shows success message

• Provides:

pg. 20
 2204410/CSE/2022

o Printable ticket

o Downloadable PDF

o Share option

Step 8: Booking Storage

• Saves booking in localStorage

• User can later view booking history

• Calendar view shows dates with bookings

5. Advantages of This System Design

• Fully responsive and user-friendly

• Works without a backend (client-side simulation)

• Fast and lightweight

• Easy to extend (add more movies, events, sports)

• Clean code separation for HTML, CSS, JS

• Realistic multi-step booking system

• Uses localStorage for persistent user data

pg. 21
 2204410/CSE/2022

6. FEATURES
FEATURES OF THE PROJECT

The Movie Ticket Booking System is designed to simulate a real-world online booking
platform with interactive UI elements and dynamic functionality. The project includes a
variety of features that enhance usability, performance, and user experience. Below is a
comprehensive list of key features:

1. User Registration and Login System

• Allows users to create an account using basic details.

• Login authentication using LocalStorage.

• Personalized user experience after login.

• User session management.

2. Dynamic Movie Display Interface

• Movies displayed using JavaScript arrays and DOM manipulation.

• Each movie card includes:

o Poster

o Title

o Genre

o Ticket price

o Wishlist icon

• Supports multiple categories like latest movies, trending movies, and recommended
films.

3. Search and Filter Functionality

• Users can search movies by name.

• Filters include:

pg. 22
 2204410/CSE/2022

o Genre filter

o Price filter

o Sorting (A–Z, price-wise, popularity)

• Instant results through JavaScript filtering.

4. Wishlist Feature

• Users can save movies to their wishlist.

• Wishlist items persist using LocalStorage.

• Easily accessible through the navigation bar.

5. Multi-Step Ticket Booking Workflow

A complete real-world booking experience, including:

a) Theatre Selection

• List of theatres with addresses.

• Show timings (morning, afternoon, evening, night).

b) Seat Selection

• Interactive layout with:

o Available seats

o Selected seats

o Occupied seats

• Real-time total price calculation.

• Option to modify selected seats.

c) Booking Summary

• Selected seats

• Movie details

pg. 23
 2204410/CSE/2022

• Total amount

• Convenience fees

• Promo code option

6. Payment Integration (Simulation)

• Multiple payment options:

o UPI

o Debit/Credit Card

o Wallet

o Net Banking

• Validates payment fields.

• Displays payment confirmation.

7. Ticket Generation and Booking Confirmation

• After successful payment, system generates:

o Confirmation message

o Ticket details (movie name, time, seats, theatre)

o QR-code-like placeholder

• Provides options to:

o Download ticket

o Print ticket

o Book another movie

8. Booking History Storage

• Old bookings stored in LocalStorage.

pg. 24
 2204410/CSE/2022

• User can see:

o Previously booked movies

o Payment amount

o Show details

• Useful for reference and record-keeping.

9. Responsive Web Design

• Fully responsive layout using CSS.

• Compatible with mobile, tablet, and desktop screens.

• Scalable card-based structure.

10. Smooth UI/UX Interactions

• Clean navigation bar

• Modals for login, register, and payment

• Hover effects and animations

• Intuitive flow of user actions

pg. 25
 2204410/CSE/2022

7. CODE IMPLEMENTATION (HTML, CSS, JS)

Below is a clear, well-organized Code Implementation section you can paste into your
practical file.
I explain the file structure, important CSS rules, and show the key JavaScript functions that
drive the application (authentication, rendering movies, booking workflow, seat selection,
storage).

The full working file you uploaded is available locally at: /mnt/data/[Link] — open
that file in a browser to run the complete project.

File structure (single-file project)

• [Link] — Single HTML file that contains:

o <head>: meta tags, Google fonts, FontAwesome, embedded CSS

o <body>: header, hero, sections (movies, events, sports, account, bookings,

wishlist), booking-section (multi-step), modals

o <script>: all JavaScript (data arrays, UI rendering functions, booking logic,

localStorage usage)

HTML (skeleton)

This is the minimal skeleton — the actual file contains a complete layout and elements with
matching IDs/classes used by JS.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

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

<title>TicketHub - Book Your Movie Tickets</title>

<!-- Google Font & FontAwesome -->

pg. 26
 2204410/CSE/2022

<link
href="[Link]
=swap" rel="stylesheet">

<link rel="stylesheet" href="[Link]

awesome/6.4.0/css/[Link]">

<!-- CSS is embedded in the same file -->

<style> /* ... full CSS ... */ </style>

</head>

<body>

<header class="header"> ... nav, login buttons ... </header>

<div class="container">

<div class="hero" id="heroSection"> ... search box ... </div>

<div id="moviesSection" class="content-section">

<h2 class="section-title">Now Showing</h2>

<div class="filters-section"> ... filters ... </div>

<div class="movies-grid" id="moviesGrid"></div>

</div>

<!-- booking-section (hidden until user starts) -->

<div class="booking-section" id="bookingSection"> ... step1, step2, step3, success ...

</div>

</div>

<script>

// JavaScript: data arrays, functions, event listeners

pg. 27
 2204410/CSE/2022

</script>

</body>

</html>

Full file with all HTML + CSS + JS is available at: /mnt/data/[Link].

CSS (high-level)

• Uses CSS variables (:root) for color palette.

• Responsive grid for .movies-grid (auto-fill, minmax).

• Card UI for movies .movie-card.

• Modal styles for login/register.

• Seat layout and legends with states .seat, .[Link], .[Link].

• Print styles included to hide navigation when printing.

(Full CSS is embedded in the uploaded file — open /mnt/data/[Link] to view.)

JavaScript — core implementation

1. Data arrays

Movies, theaters, events and sports are stored as arrays of objects at the top of the script:

const movies = [

{ id:1, title:"Avengers: Endgame", genre:"Action", duration:"3h 1m", price:250,

poster:"[Link] rating:8.4 },

// ...

];

const theaters = [

{ id:1, name:"PVR Cinemas", address:"Phoenix Mall, Whitefield", showtimes:["10:00

AM","1:30 PM", ...] },

pg. 28
 2204410/CSE/2022

// ...

];

2. Initialization

On DOMContentLoaded we render movies/events/sports and check login status:

[Link]('DOMContentLoaded', () => {

renderMovies();

renderEvents();

renderSports();

checkLoginStatus();

setupEventListeners();

});

3. Render movies (dynamic DOM creation)

renderMovies() creates movie cards from the movies array and inserts them into
#moviesGrid:

function renderMovies() {

const grid = [Link]('moviesGrid');

[Link] = '';

[Link](movie => {

const card = [Link]('div');

[Link] = 'movie-card';

[Link] = `

<button class="wishlist-btn" onclick="toggleWishlist(${[Link]})">

<i class="fas fa-heart"></i>

</button>

<img src="${[Link]}" class="movie-poster" />

<div class="movie-info">

pg. 29
 2204410/CSE/2022

<div class="movie-title">${[Link]}</div>

<div class="movie-genre">${[Link]}</div>

<div class="movie-price">₹${[Link]}</div>

<button class="btn btn-primary" onclick="startBooking(${[Link]})">Book</button>

</div>

`;

[Link](card);

});

4. Search and filters

Functions listen to filter inputs and apply simple array filtering/sorting, then call
renderMovies() again:

function applyFilters() {

const sort = [Link]('sortMovies').value;

const genre = [Link]('genreFilter').value;

const price = [Link]('priceFilter').value;

let results = [Link]();

if (genre !== 'all') results = [Link](m => [Link](genre));

// price filter parsing...

// sort if needed

// render filtered results into grid

5. Authentication (Login / Register using localStorage)

Simple client-side auth using localStorage:

function handleRegister() {

const name = [Link]('regName').value;

pg. 30
 2204410/CSE/2022

const email = [Link]('regEmail').value;

const username = [Link]('regUsername').value;

const password = [Link]('regPassword').value;

const users = [Link]([Link]('users') || '[]');

if ([Link](u => [Link] === email || [Link] === username)) {

[Link]('regError').textContent = 'User already exists';

return;

const newUser = { name, email, username, password };

[Link](newUser);

[Link]('users', [Link](users));

[Link]('currentUser', [Link](newUser));

currentUser = newUser;

updateUIForLoggedIn();

[Link]('loginModal').[Link]('active');

function handleLogin() {

const email = [Link]('loginEmail').value;

const password = [Link]('loginPassword').value;

const users = [Link]([Link]('users') || '[]');

const user = [Link](u => ([Link] === email || [Link] === email) && [Link]
=== password);

if (user) {

[Link]('currentUser', [Link](user));

currentUser = user;

updateUIForLoggedIn();

pg. 31
 2204410/CSE/2022

[Link]('loginModal').[Link]('active');

} else {

[Link]('loginError').textContent = 'Invalid credentials';

6. Booking workflow — starting a booking

startBooking(movieId) opens the booking section and loads movie details + theatre list:

function startBooking(movieId) {

selectedMovie = [Link](m => [Link] === movieId);

bookingType = 'movie';

[Link]('bookingTitle').textContent = [Link];

[Link]('bookingPoster').src = [Link];

[Link]('bookingSection').[Link]('active');

renderTheatersForBooking();

7. Theater & showtime selection

renderTheatersForBooking() loops the theaters array and displays showtimes as buttons.

Selecting a showtime sets selectedTheater and selectedShowtime, enabling the “Proceed”
button.

8. Seat selection engine

Seats are rendered as a grid of .seat elements with row labels. Seat objects have states
(available, occupied, selected). Example seat click logic:

function renderSeats(layoutRows=6, cols=10) {

const container = [Link]('seatsLayout');

[Link] = '';

for (let r=0; r<layoutRows; r++) {

const rowDiv = [Link]('div');

pg. 32
 2204410/CSE/2022

[Link] = 'seat-row';

for (let c=0; c<cols; c++) {

const seat = [Link]('div');

[Link] = 'seat';

const seatId = `${[Link](65+r)}${c+1}`;

[Link] = seatId;

// random occupied example or check bookings to mark occupied

if ([Link]() < 0.08) [Link]('occupied');

[Link]('click', () => toggleSeatSelection(seat));

[Link](seat);

[Link](rowDiv);

function toggleSeatSelection(seatEl) {

if ([Link]('occupied')) return;

[Link]('selected');

const seatId = [Link];

if ([Link]('selected')) [Link](seatId);

else selectedSeats = [Link](s => s !== seatId);

updateBookingSummary();

9. Booking summary & promo codes

updateBookingSummary() computes ticket cost (ticketPrice * [Link]),

convenience fee, promo discounts (if applied), and updates DOM elements #selectedSeats,
#ticketPrice, #convenienceFee, #totalAmount.

pg. 33
 2204410/CSE/2022

Promo code application example:

function applyPromoCode() {

const code = [Link]('promoCode').[Link]();

if (code === 'MOVIE50' && [Link] > 0) {

// apply 50 off or 10% discount etc.

[Link]('promoSuccess').textContent = 'Promo applied!';

[Link]('promoSuccess').[Link]('active');

} else {

[Link]('promoError').textContent = 'Invalid promo';

[Link]('promoError').[Link]('active');

updateBookingSummary();

10. Payment simulation & confirm

User selects payment method. selectPaymentMethod(method) shows payment form. On

confirmPayment() the system:

• Validates payment inputs

• Constructs a booking object and stores it in localStorage bookings array

• Shows success message and provides options to download or print

function confirmPayment() {

// simple validation ...

const bookings = [Link]([Link]('bookings') || '[]');

const booking = {

userId: currentUser ? ([Link] || [Link]) : 'guest',

movieId: [Link],

movieTitle: [Link],

pg. 34
 2204410/CSE/2022

theaterId: [Link],

showtime: selectedShowtime,

seats: [Link](),

amount: computeTotalAmount(),

date: new Date().toISOString()

};

[Link](booking);

[Link]('bookings', [Link](bookings));

showSuccess();

11. Ticket download & print

downloadTicket() uses jsPDF (included via CDN in the file) to create a simple PDF ticket
(movie name, seats, timing, booking id) and trigger download. printTicket() opens print
dialog for the ticket area.

Important helpers & utilities

• checkLoginStatus() loads currentUser from localStorage.

• showMyBookings() reads bookings from localStorage and displays them by filtering

on userId.

• UI helpers: showSection(name), toggleAccountMenu(), updateUIForLoggedIn(),

logout().

How to run the project (quick steps)

1. Open the file: /mnt/data/[Link] in any modern browser (Chrome

recommended).

o In many environments you can drag the file into the browser or File → Open.

2. Use the Login button to register a new user (it stores accounts in localStorage) or
test as guest.

pg. 35
 2204410/CSE/2022

3. Browse movies, click Book, choose theatre & showtime, select seats and proceed to
payment.

4. Confirm booking — bookings are stored in localStorage and visible under My

Bookings.

Notes on extending the project

• Replace localStorage with a backend ([Link] + Express + MongoDB or Firebase) for

real persistence & concurrency.

• Add authentication with hashed passwords and sessions (JWT or server-sessions).

• Integrate a real payment gateway (Razorpay/Stripe) instead of simulation.

• Use a templating framework (React/Vue) for better state management.

• Add unit tests for JS logic and E2E tests (Cypress).

pg. 36
 2204410/CSE/2022

8. OUTPUT DESCRIPTION
1. The homepage displays movie posters, search bar, and filters.
2. Users can log in or register using pop-up forms.
3. Clicking Book opens the booking interface.
4. Theatres and showtimes are shown for the selected movie.
5. Seat selection screen displays available, selected, and occupied seats.
6. Total amount updates automatically based on selected seats.
7. Payment screen allows choosing UPI, card, wallet, or net banking.
8. After confirmation, a ticket is generated with booking details.
9. Users can download, print, or view their ticket in My Bookings.
10. Wishlist shows all favorite movies saved by the user.

pg. 37
 2204410/CSE/2022

9. CONCLUSION
The Movie Ticket Booking System developed using HTML, CSS, and JavaScript successfully
demonstrates the implementation of a functional, user-friendly, and interactive web
application. The project replicates the workflow of real-world ticketing platforms by
integrating essential features such as user authentication, dynamic movie display, intelligent
filtering, seat selection, promo code validation, and simulated payment processing.

Throughout the development process, various front-end technologies were applied to build
an intuitive interface and provide smooth user interaction. JavaScript played a crucial role in
enabling dynamic content rendering, managing bookings, generating tickets, handling
localStorage data, and ensuring seamless navigation across multi-step booking processes.

This project enhanced the understanding of web development concepts, event-driven

programming, UI/UX design, and client-side data handling. It also demonstrated how AI-
inspired features such as recommendations, predictive seat occupancy, and personalized
suggestions can be incorporated to improve user experience.

Overall, the system meets all the intended objectives by offering a complete end-to-end
ticket booking workflow, making it a valuable learning experience and a strong foundation
for developing more advanced, real-world web applications in the future.

pg. 38
 2204410/CSE/2022

6. Multi-Language and Regional Support

7. Advanced Analytics Dashboard

8. GPS-Based Theatre Suggestions

9. User Notifications & Alerts

10. Enhanced Security

pg. 39
 2204410/CSE/2022

10. REFERENCES
• [Link] (MDN Web Docs)

• [Link]

• [Link] (for jsPDF library)

pg. 40