Bill Calculator
A Grocery Shop requires an application for Bill Calculation. The person generating the bill is
supposed to enter the product details. Using the output tag, the total price is displayed.
Concepts covered: Web Forms 2.0 – input tag, output tag, placeholder attribute and required
attribute. The following are the screenshots of the Bill Calculator
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 [Link] 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
[Link] Tags, Elements and Attributes should conform to HTML5 Standards. All the fields
are [Link] the details as given in the table below.
Req. Req. Name Req. Description
#
1 Design a Web page
“Bill Calculator” with
the specified fields.
Label Component Id Description
Name (Specify it for the
“id” attribute)
Product productName To enter the product
Name name.
Design Constraints:
Use type=”text”.
The text “Product
Name” should appear by
default.
It is mandatory.
Product price To enter the price of the
Price in Rs. product.
Design Constraints:
Use type=”number”.
The text “Product Price”
should appear by
default.
It is mandatory.
Quantity qty To enter the product
quantity.
Design Constraints:
Use type=”number”.
The text “Enter quantity”
should appear by
default.
Assume that the min
value is “1”.
It is mandatory.
Total Price totalprice To display the total price
in Rs. of the product.
Design Constraints:
Use output tag.
It is mandatory.
Submit submit The input type submit
must be used.
NOTE: The text highlighted in bold in the Description needs to
be implemented in the code to complete the web page design.
4 form Tag with form Tag is already given in the code template. Do not change
attribute onsubmit the code template and do the coding as per the requirements
and specifications.
Make sure that the onsubmit attribute in the form tag invokes
the JavaScript function like "return calculateTotalPrice()".
Also ensure that the “return false;” statement is the last line of
the JavaScript function “calculateTotalPrice()”.