Mercury Drug Delivery Service - Partner Invite
Mercury - A new drug delivery service in the city is inviting pharmacies to partner with them;
promising lightning fast delivery of pharmacy drugs to their customers. Design a partner-
invite web page for Mercury to kick start their service. The web page must require the
pharmacist to fill in details of the pharmacy.
The following are the screen-shots pertaining to Mercury Drug Delivery Service - Partner
Invite
After checking terms of services and on mouse over submit button :
Use the Label Name and the Component Id as given. The Component Id can be given
in any case (Upper case or Lower case or Mixed case). 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, marks will not be provided for this
component.
All Tags, Elements and Attributes should conform to HTML5 Standards. All the fields
except website link are mandatory.
Provide the details as given in the table below.
Re Req. Req. Description
q. # Name
1 Design a
Web page
“ Label Name Component Description
Mercury Id
Drug
Delivery (Specify it
Service - for the “id
Partner ” attribute)
Invite”
with the
specified pharmacyNa To enter the name of the
fields. me pharmacy.
Design Constraints:
The text “Pharmacy
name*” should appear by
default.
It should contain only
alphabets, numbers and
spaces.
It should be mandatory.
pin To enter the pin.
Design Constraints:
The text “Pin (Primary
Location)*” should
appear by default.
It should contain 6 digits
and the first digit must not
be 0.
It should be mandatory.
city To enter the city.
Design Constraints:
The text “City*” should
appear by default.
It should be mandatory.
oname To enter the name of the
pharmacy owner.
Design Constraints:
The text “Pharmacy
owner*” should appear
by default.
It should contain only
alphabets and spaces.
It should be mandatory.
phno To enter the phone
number.
Design Constraints:
The text “Phone
number*” should appear
by default.
Tips:
Use type=”tel”or Use
type=”text” .
Use “pattern” attribute to
accept the 10 digit
mobile no to start with
either one of the following
numbers: 7,8 or 9.
It should be mandatory.
email To enter the email id.
Design Constraints:
The text "Email*" should
appear by default.
Tip: Use type=”email”
It should be mandatory.
link To enter the website link /
online listing link.
Design Constraints
The text “Website Link/
online listing link”
should appear by default.
Provide the correct input
type to make this
component accept a link.
noOfOutlets To enter the number of
outlets.
Design Constraints:
The text “Number of
outlets*” should appear
by default. Set the min no
of outlets as 1.
It should be mandatory.
primaryArea To enter the primary area
of outlet.
Design Constraints:
The text “Primary Area
of outlet*” should appear
by default.
It should be mandatory.
cost To enter the minimum
purchase cost.
Design Constraints:
The text “Minimum
purchase cost*” should
appear by default. Set the
min attribute of cost as
200.
It should be mandatory.
type To enter the
establishment type.
An auto-complete feature
should be available to the
user for the following
options “Independant”,
“Chain”
Design Constraints
The text "Establishment
:
Independant/Chain*" sh
ould appear by default.
(Use DataList to
implement the auto-
complete feature. Its id
should be
“establishmentType” )
It should be mandatory.
Medicines available Use ”gsl”, “p”, To select the medicine
“pom”, “cds” types.
as the
component Design Constraints
ids for the
check box Use Check Box with
options ”General Sales List
Medicines(GSL)”,
“Pharmacy
Medicines(P)”,
“Prescription Only
Medicines (POM)” and
“Controlled Drugs
(CDs)” as options. Use
“items” as the
Component Name for
check box.
It should be mandatory.
License(Jpeg/PDF)* license To upload License.
Design Constraints:
Provide the correct input
type to make this
component accept an
image of type .jpeg or a
PDF.
It should be mandatory.
GSTIN/PAN* pan To upload GSTIN/PAN.
Design Constraints:
Provide the correct input
type to make this
component accept an
image of type .jpeg or a
PDF.
It should be mandatory.
FSSAI(Jpeg/PDF)* fssai To upload FSSAI.
Design Constraints:
Provide the correct input
type to make this
component accept an
image of type .jpeg or a
PDF.
It should be mandatory.
Facade/Pharmacy- others To upload mutiple
shelves/Refridgerator(Jp images.
eg)*
Design Constraints:
Provide the correct input
type to make this
component accept
multiple image files of
type .jpeg.
It should be mandatory.
terms To check : “I agree to
terms of services” - a
hyperlink.
Design Constraints
Use Check Box. Specify
href for anchor tag
holding hyperlink as
"#submit". Its id must
be terms_ref.
However, it need not be
linked to anything.
submit The input type button
must be used, with value
“SUBMIT”.
It is clickable but has
no action associated
with it.
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 1. The given image must be set as the background-image of BODY
using and font-weight of the content of the body must be bold.
CSS to
the 2. HEADING should be specified using <h3> tag.
componen Its color must be #FFFFFF and the background-color must be
ts #800000.
The margins: margin-left and margin-right must be auto.
The text-align must be center and width 60%.
The font-family of the text must be Verdana.
The padding and border-radius must be 3px and 6px respectively.
3. TABLE must be styled with width 60% and border-style - 3px
solid.
The margins: margin-left and margin-right must be auto.
The border-spacing and border-radius must be 5px and 6px
respectively.
4. The font-size of TABLE DATA - td must be 15px.
STYLING WITH ID SELECTORS
1. SUBMIT button’s text must be colored with #800000.
Its font-weight must be bold and its background - transparent.
The border-radius must be 6px.
2. On hovering over submit, its background color must turn #800000
and the color of the text must turn #FFFFFF
STYLING WITH CLASS SELECTORS
1. Set ‘a’ as class for all the components without label and colspan.
Specify its width as 50%;
2. Set ‘b’ as class for the p tags ‘within which’ appear the checkbox
with id terms and the submit button.
Specify its width as 60%.
The margins: margin-left and margin-right must be auto.
STYLING WITH ATTRIBUTE SELECTORS
1. Set a transparent background and a width of 100% for the input
types :
text, number, email, tel, url and file.
2. Set a transparent background for the input type checkbox and
button.
3. Change the color of the text within anchor tag to #00800A on
checking. How - Pick the input type checkbox with id terms checked +
the anchor tag and set it to #00800A.
4. Use pseudo element selector to color placeholder in #DCDCDC.
[ Use the syntax specific to Chrome/Opera/Safari *]
Note: Fill in the style tag so as to have the given styles applied to the
components.
(Do not use Inline CSS)