UI Assignment

Page Design:

Home Page – It will have one image logo in header with message “XYZ Airlines”. Footer should have
contact address and link to www.google.com. In central area, it will have link to Register Flight.html.

Register Flight: It will also have same header and footer as home page. Design central section per below
guidelines. Ensure that controls are aligned through table tag.

Capture below details from user:

Flight Code:

From:

To:

Departure Time: (Use text box to enter value from 1 to 24.Minutes not to be considered)

Arrival Time: (Use text box to enter value from 1 to 24.Minutes not to be considered)

Capacity:

Weekly Frequency: (Use seven checkboxes one for each day. This indicates the week days when flight is
scheduled)

Add submit button. On submitting the form, if all validations are passed, navigate to Confirmation page.

Confirmation Page: This page will also have same header and footer sections. In central section, it will
have a message like “Flight registered successfully” and there will be a link to Home page.

CSS Design:

Lables to capture details should be displayed in blue color.

Page background should be pink for all three pages (can apply directly in pages, hence not required in
external CSS)

Text box background should be yellow

Text box font should be red

Header label should be of red color

Validations (for Register Flight page):

All fields are mandatory.

Departure time should be less than arrival time.

Value in departure time should have numbers only and from 0 to 23.

At least one checkbox should be selected for weekly frequency.

(Optional) Flight code should contain at least one alphabet and one digit.

Display appropriate message if validation has failed.

All The Best