Bill Calculator CTS

Bill Calculator HTML and CSS Program

Bymadwithcode

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

Calculator HTML.html

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

</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;
 }

Similar Posts