You are on page 1of 7

AC Maintenance Service

Sanjay is an AC mechanic who runs a service center for AC maintenance and repair servicing in the
city. His customers will call him and book him for the AC maintenance service. Due to more number
phone calls in between the busy working hours, he forgets few bookings and so his customers were
disappointed. To solve this inconvenience, Sanjay wants an application to book the appointment for
AC Servicing. So that he could have a record over the service bookings.

As an initiative to this application, develop a web page to get the customer details and the
appointment details for AC servicing. On submitting, the appointment details have to be displayed
on the same page along with the estimated service amount as shown in the screenshots below.
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 a HTML component, the marks will not be provided for this 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


#
1 Design a Label Name Component  Id Description
HTML page (Specify it for the
for “AC “id” attribute)
Maintenanc Customer customerName To enter the name of the customer.
e Service” Name
application Design Constraints:
 Use type=“text”
 The text “Enter your name”
should appear by default.
 It should be mandatory.

Gender male To choose the gender of the customer.

Design Constraints:
 Use Radio button
 It should have “Male” as option
and value.

female To choose the gender of the customer.

Design Constraints:
 Use Radio button
 It should have “Female” as
option and value.

Mobile mobileNumber To enter the mobile number of the


Number customer. 

Design Constraints:
 The text “Enter your mobile
number” should appear by
default.
 It should be mandatory.

Tips

 Use type=“tel”
or
Use type=“text” of
type=“number” with pattern
attribute to accept the 10 digit
mobile number to start with
either one of the following
numbers:
7,8 or 9

Email ID email To enter the email Id of the customer.

Design Constraints:
 The text “Enter your email Id”
should appear by default.
 It should be mandatory.
Tips
 Use type=“email”

Address address To enter the address of the customer.


Design Constraints
 Use textarea
 The text “Enter your address”
should appear by default.
 Provide the correct tag and
attribute to create a text area
with 5 rows and 25 columns.
 It should be mandatory.
AC Type acType To enter the required AC type.

Design Constraints

 An auto-complete feature should


be available to the user for the
following options.

“Split”, “Window”,
“Centralized”, “Portable”

 Id of the auto-complete feature


should be “acTypes”.
 Use DataList to make use of the
auto-complete feature
 It should be mandatory.

Service Type serviceType Drop down box to select the Service


Type.

Design Constraints:
 Drop down should have
“Cleaning”, “Repair” and “Gas
Refill” as options and its values
respectively.

Date for dateForAppointment To enter the required appointment


Appointmen date.
t
Design Constraints:
 Use type=“date”
 It should be mandatory.

Yearly yearlyMaintenance To select the yearly maintenance


Maintenance option, if required.

Design Constraints
 Use Check Box with “Select if
required” as the option.

Duration in duration To choose the duration in months


months from from the previous service.
the previous
service
Design Constraints
 Use type=“range”
 The value of duration should
be range in between 0 and 6
(both inclusive) and should be
stepped by 1.
 Use title attribute to display "0 to
6 Months” as tooltip

Submit submit Submit Button to submit the form


Design Constraints
 The input type should be
“submit” and value should be
“Submit”

Clear reset Reset Button.  On clicking this


button, all fields should be reset.
 The input type should be
“reset” and value should be
“Clear”

 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 1. Body color should be “#0ca2b9”, width should be 80% and left
mentioned margin should be 10%.
styles using 2. The heading “AC Maintenance Service” should be specified using
CSS to the <h1> tag, the text color should be “#FFFFFF”, font should be
components “Calibri”, style should be “italic”, background color should be
“#900043” and it should be aligned to the center of the webpage.
3. The result should be bold, font should be “Arial”, font size should be
“24px” and color of the text should be “#782e07”.
4. Submit button and Reset button font should be displayed in “bold”,
font should be “Candara”, background color should be “#556b2f”,
width should be “10em”, height should be “35px” and border radius
should be “10px”.

Note: Fill in the style tag so that the given styles are applied to the
components.
(Do not use Inline CSS)
3 Use Use JavaScript for displaying the appointment details: 
JavaScript When the customer enters the valid values and clicks the “Submit” button,
for the appointment details should be displayed as follows:
displaying
the
appointment If the “yearlyMaintenance” option is selected, then the result should be
details. displayed as
“Hello <customerName>, your service appointment for <acType> AC
<serviceType> with yearly maintenance will be send to your email ID
<email> and the estimated service charge will be Rs <serviceCharge>”
in a div tag with id as “result”.
Otherwise, if the “yearlyMaintenance” option is not selected, then the
result should be displayed as
“Hello <customerName>, your service appointment for <acType> AC
<serviceType> without yearly maintenance will be send to your email ID
<email> and the estimated service charge will be Rs <serviceCharge>”
in a div tag with id as “result”.

The serviceCharge should be calculated based on the following slab:

serviceCharg
serviceTyp
e
e
(in Rs)
Cleaning 500
Repair 1000
Gas Refill 1500

Also, if the “yearlyMaintenance” option is selected, then add Rs 1000


extra to the serviceCharge.

Example:
 If the customer chooses Gas Refill with yearly maintenance, then the
estimated serviceCharge will be Rs 2500.
 If the customer chooses Gas Refill without yearly maintenance, then
the estimated serviceCharge will be Rs 1500.

Note: Use the getElementById() function to retrieve the values.


4 form Tag 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.
onsubmit Make sure that the onsubmit attribute in the form tag is invoking the
JavaScript function like "return bookAppointment()".
Also ensure that “return false;” statement is the last line of the JavaScript
function “bookAppointment()”.

You might also like