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

Req. #

Req. Name

Req. Description

1

Design a Web page “Bill Calculator” with the specified fields.

Label Name

Component  Id

(Specify it for the “id” attribute)

Description

Product Name

productName

To enter the product name.

Design Constraints:

Use type=”text”.

 The text “Product Name” should appear by default.

 It is mandatory.

Product Price in Rs.

price

To enter the price of the 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 in Rs.

totalprice

To display the total price 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 attribute onsubmit

form Tag is already given in the code template. Do not change 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()”.

 

Answer:

Billcalculator.html
<!DOCTYPE html>
<html>
    <head>
        <title>Bill Calculator</title>
        <link rel="stylesheet" href="billcalc.css">
        </head>
            <body>
                <h1>Bill Calculator</h1>
                <form oninput="totalprice.value=parseInt(price.value)*(qty.value)" onsubmit="return calculateTotalPrice();">
                    <table>
                        <tr>
                            <td>Product Name</td>
                            <td> <input type="text" id="productName" placeholder="product Name" required=""></td>
                        </tr>
                        <tr>
                            <td>product price in Rs.</td>
                            <td><input type="number" id="price" placeholder="product Price" required="" ></td>
                        </tr>
                        <tr>
                            <td>Quantity</td>
                            <td><input type="number" id="qty" placeholder="Enter quantity" required=""> </td>
                            
                        </tr>
                        <tr>
                            <td>Total Price in Rs.</td>
                    <td><output id="totalprice" value="" for="price qty" name="totalprice" ></output></td>
                        </tr>
                        <tr><td colspan="2"><input type="submit" name="submit" id="submit" value="Submit"></td></tr>
        </table>
        </form>
        <script>
            function calculateTotalPrice()
            {
                var val1=parseInt(document.getElementById("price").value);
               var val2=parseInt(document.getElementById("qty").value);
               var ansD =document.getElementById("totalprice");
               ansD.innerHTML = val1 * val2;
                
                return false;
             }
        </script>
</html>

billcalc.css

h1{
   text-align:center;
   color:#FF00FF;
   font-style:italic;
   font-weight:bold;
 }

 table{
     text-align:left;
     margin-left:35%;
     border-spacing:10px;
     border-width:10%;
     border-style:solid;
     background-color:#F899A4;
     

 }
 td{
     border-style:ridge;
     padding:10px;
 }