Cognizant Handson - Bill Calculator

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

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.

form Tag with attribute onsubmit

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()”.

Solution:

billcalculator.html

<!DOCTYPE html>

<html>

<head>

<title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>

</head>

<body>

<h1 id="">Bill Calculator</h1>

<table>

<tr>

<td>Product Name</td>

</tr>

<tr>

<td>Product Price in Rs.</td>

</tr>

<tr>

<td>Quantity</td>

</tr>

<tr>

<td>Total Price in Rs.</td>

</tr>

<tr>

<td colspan="5"><button id="submit" type="submit" onsubmit="calculateTotalPrice()">Submit</button></td>

</tr>

</table>

</form>

function calculateTotalPrice(){

var price=document.getElementById('price').value;

var quantity=document.getElementById('qty').value;

document.getElementById('totalprice').innerHTML=price*quantity;

return false;

}

</script>

</body>

</html>

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

}

Cognizant Handson - Bill Calculator

Bill Calculator

Solution:

Post a Comment