ITR Railway Management

ITR Railway is a new railway service. Currently, they have an application that facilitates ticket booking. ITR
Railway Management gets numerous cancellations as well. Processing ticket cancellation manually takes an
enormous amount of time. So, they decide to automate the process. When customers want to cancel their tickets,
they can do it until it’s 2 days before the travel date. Help them to develop a web page to calculate the total
refund amount along with the convenience fee and cancellation charges. On submitting the details of the booked
travel, the message on cancellation has to be displayed on the same page as shown in the given screenshots.

Plain Web page design :

After entering valid details and clicking on the CONFIRM CANCELLATION button
Use the Label Name and the Component Id as given. All the necessary attributes for the Components
should be given. 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.

Re Req. Name Req. Description

q.
#

1 Design an Label Name Component  Id Description

HTML page (Specify it for
for “ITR the “id”
Railway attribute)
Management” Passenger pname To enter the name of the
application Name passenger.
Design Constraints:
 The text “Enter the passenger
name” should appear by
default.
 It should be mandatory.

 Use type=“text”

Phone Number phno To enter the phone number of the

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

Date of Trip tripdate To enter the trip date.

Design Constraints:
 Use type=“date”
 It should be mandatory.
 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”

Date of cancellationdate To enter the cancellation date.

Cancellation Design Constraints:
 Use type=“date”
 It should be mandaatory.

Seat Type stype To select the seat type.

Design Constraints
Use the drop down box with
“Select Seat Type..”,
“SecondSitting”, “Sleeper”,
“FirstClass” and “ACFirstClass”
as options.

Amount Paid amountPaid To enter the amount paid.

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

submit Submit Button to submit the form

Design Constraints
 The input type should be
“submit” the value should be
"CONFIRM
CANCELLATION"

 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
CSS to the
#FF9966.
components The margins: margin-left and margin-right must be auto.
The text-align must be center and 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 #FFFFFF and the background-color must be
transparent.
The padding must be 1px.

STYLING WITH ID SELECTOR

SUBMIT component must be styled using its id as in :

Its color must be #FFFFFF and the background-color must be
#FF9966.
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.

RESULT component must be styled using its id as in:

Its color must be #00FF99 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)
3 Use JavaScript Use JavaScript for displaying the refund amount details: 
for displaying
the refund When the valid values are entered and the submit button is clicked, the
amount details. refund amount should be displayed as follows:
“Hi passengerName, your ticket has been successfully canceled and the
refund amount is Rs. refundAmount ”
in a div tag with id as “result”.

Seat Type Convenience Fee Cancellation

per ticket percentage (for any
no of tickets)
SecondSitting 10 30%
Sleeper 30 40%
FirstClass 50 50%
ACFirstClass 60 50%

Formula:
ConvenienceFee = noOfTickets * convenience fee per ticket
CancellationCharge = amountPaid * cancellation percentage
 RefundAmount = amountPaid - convenienceFee – cancellationCharge

Specific Example: If the no of ticket is 3, if the seat type is Sleeper and if

the amount paid by a passenger is Rs.1503, then
ConvenienceFee = 3 * 30 = Rs. 90.0
cancellationCharge = 1503 * 0.4 = Rs. 601.2
RefundAmount = 1503 - 90.0 - 601.2 = Rs. 812

Note:
 Use the getElementById() function to retrieve the values.
 Use Math.round() on RefundAmount to get its rounded value.
 In Javascript, Please do not use “let” or “const”. Instead, use “var”.
4 form Tag with form Tag is already given in the code template. Do not change the code
attribute template and do the coding as per the requirements and specification.
onsubmit
Make sure 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()”.