Dream Pictures

Dream Pictures is a famous movie theatre in the city. They want to automate their Ticket Booking service for
their customers, by which customers can know ticket details and book tickets at their convenience. Help them
out by developing a web page that will calculate the ticket cost to be paid by a customer on his booking. On
submitting relevant details, the message has to be displayed on the same page as shown below.

Plain Web page :

After giving all relevant details and clicking on Book Ticket button :
Use the Label Name and the Component Id as given. All the necessary attributes for the Components should
be given. The Component Id should be specified for each HTML Component. If the Component Id is not
provided for an HTML component, marks will not be provided for that component. All Tags, Elements and
Attributes should conform to HTML5 Standards. All the fields are mandatory.

Provide the details as given in the table below.

Req. # Req. Name Req. Description

Design an Label Name Component  Id Description

1 HTML page (Specify it for the
for “Dream “id” attribute)
Pictures” Customer Name cname To enter the name of the customer.
application Design Constraints:
 The text “Enter the customer name”
should appear by default.
 It should be mandatory.

 Use type=“text”

Phone Number phno To enter the phone number of the

customer.
Design Constraints:
 The text “Enter the phone number”
should appear by default.
 It should be mandatory.
 Use type=“text”

Ticket Id tid To enter the ticket id.

Design Constraints:
 The text “Enter the ticket id” should
appear by default.
 It should be mandatory.
 Use type=“text” with pattern attribute
for accepting a 3-digit number
following "DRM"

Date of Booking bookingdate To enter the booking date.

Design Constraints:
 Use type=“date”
 It should be mandatory.
 Screen Category category To select the screen category.
Design Constraints
Use the drop down box with “Select Screen
Category..”, “Balcony”, “Platinum” and
“Gold” as the option and its values.

Number of noOfTickets To enter the number of tickets.

Tickets Design Constraints:
 The text “Enter the number of tickets”
should appear by default.
 It should be mandatory.
 Use type=“text”

Movie Name movie To select the movie name.

Design Constraints
Use the drop down box with “Select Movie
Name..”, “Godzilla Vs Kong”, “Monster
Hunter” as the option and its values.

Beverages beverages To check beverages, if required.

Design Constraints:
 “Click here if you want beverages” is
the text that follows the checkbox
component.
 Use type=“checkbox”

submit Submit Button to submit the form

Design Constraints
 The input type should be “submit”.
 The value should be “Book Ticket”

Note: The text highlighted in bold in the Description needs to be implemented in

the code to complete the web page design.
2 Apply the STYLING WITH ELEMENT SELECTORS
mentioned
styles using 1. HEADING should be specified using <h3> tag.
Its color must be #FFFFFF and the background-color must be #6666FF.
CSS to the
The margins: margin-left and margin-right must be auto.
components
The text-align must be center and the width 50%.
The font-family of the text must be Verdana.
The padding and border-radius must be 5px and 6px respectively.

2. TABLE, tr and td must be styled with width as 50%.

The margins: margin-left and margin-right must be auto.
The border-spacing and border-radius must be 1px and 6px respectively.
Its color must be #000000 and the background-color must be #E6E6E6.
The padding must be 1px.
 STYLING WITH ID SELECTOR

1. SUBMIT component must be styled using its id as in :

Its color must be #FFFFFF and the background-color must be #6666FF.
The margins: margin-left and margin-right must be auto.
The padding must be 5px and width must be 50%.
The font-family of the text must be Verdana and font-weight must be bold.
The border-radius must be 6px.

2. RESULT component must be styled using its id as in:

Its color must be #0066FF and the font-size must be 20px.

Note: Fill in the style tag so as to have the given styles applied to the components.
(Do not use Inline CSS and short hand styling)

3 Use Use JavaScript for displaying the bill amount details:

JavaScript for
displaying the When the valid values are entered and the submit button is clicked, the bill amount
bill details. should be displayed as follows:
“Ticket is booked successfully for movie movie You should pay Rs.totalAmount”
in a div tag with id as “result”.

Seat category Cost per seat

Balcony Rs. 750
Platinum Rs. 500
Gold Rs. 450

Formula:
totalCost= noOfTickets*costPerSeat
If beverages is selected, then add 250 on each ticket along with totalCost
Example:
If 3 tickets of seatCategory “Balcony” is chosen with beverages
totalCost= (3*750)+(250*3)
If 3 tickets of seatCategory “Balcony” is chosen without beverages
totalCost= (3*750)

Note:
 Use the getElementById() function to retrieve the values.
 Use Math.round() on the final result to get a rounded value.
 In Javascript, Please do not use “let”. Instead, use “var”.
4 form Tag The form Tag is already given in the code template. Do not change the code
with attribute template and do the coding as per the requirements and specification. Make sure
onsubmit that the onsubmit attribute in the form tag invokes the JavaScript function like
"return display()". Also ensure that the “return false;” statement should be the last
line of the JavaScript function “display()”.