Header Ads Widget

Generate bill using HTML CSS & JavaScript.

My codding spot October 09, 2021

In many stores or shops the bill generates on a computer and you can print this bill. The bill is automatically generated, the user has to enter only some information, and the calculation is done automatically. This post is about calculating discounts, sales prices, and total prices in bills using JavaScript.

Steps to generate Bill 

1. Create a structure of Bill using HTML.

The whole structure of Bill is created by using <table> element and input elements. In the heading, I gave the title of the store name "My Kurti Store". Two tables are created. One for the customer name and the Second for other fields. These are Sr no, Items, Quantity, MRP, Discount, and Sale price.


Here are Sr no. and Items fields, all four values are pre-defined, and these fields are non-editable. To make them only readable, the readonly constraints were added to sr no. and items input fields. The pattern attribute added to mobile no. field to take input in a specified pattern.


Here is a simple HTML structure of "My Kurti Store".

HTML Structure of bill
HTML Structure of bill


2. Style Bill with CSS.

When styling the HTML elements, the most boring task is an alignment of an element. So I first aligned the <div> element to the center both horizontally and vertically.

To center the <div> element, your first step is to set its position property's value to absolute, then set top and left properties value to 50%. After when you show the output an element is positioned in the bottom right corner, not the center. 

To position the center <div> element, here I used transform property with translate -50, -50 percentage. So the translate method move <div> element to -50% on X-axis and Y-axis in a top-left direction, which aligned <div> to the center.

After aligning the <div>, applied CSS styles to other elements. For the button,  transform property with 0.5 scalings applied in the :active pseudo-class selector. When the button gets clicked it resized.

Styling Bill using CSS
Styling Bill using CSS 




3. Validate and calculate bill amount using JavaScript

Form values are accessed by DOM methods. The "document.forms()" method fetch and display data in input fields.

The checkvalid() function checks whether the input data in fields is correct or not.  The checkvalid () function checks null input fields and the correctness of input data. If wrong data is entered in fields or null then an alert message displays on the screen when clicking on "quantity" fields.

Validation of input fields of Bill
Validation of input fields of Bill 




Mobile no.validation by javascript function
Mobile no. validation by a javascript function

Function calc_sale() calculates the sales price of four items. Before calculating the sales price the discount percentage is converted into decimal(divided by 100 and multiplied by MRP). After that sales price is calculated. The total price is calculated by the sum of all sales prices.

Sales price calculation on Bill
Sales price calculation on Bill



Events used in Bill generation 

Two mouse events are used.

onClick:-

When the user clicks on an element, an onClick event occurs. 

Here in HTML code onClick event occurs on Quantity fields and button. This event call checkvalid () function on Quantity fields and final_price() on the button (Total price).


onmouseover:-

When the mouse pointer moves on an element, an onmouseover event occurs. When you move the mouse pointer on sales price fields, the onmouseover event call calc_sale() function.

Following is the complete code.

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!Doctype html>
<html>
<head>
<title>Digital bill generator</title>
<link rel="stylesheet" href="bill.css">
<script src="bill.js"></script>
</head>
<body>
<div>
<h1>My Kurti Store</h1>
<form name="bil" action="#" >
<table class="t1">
<tr><td>
<tr><td><label for="cust_nm" >Customer name:.</label></td>
<td><input type="text" name="cnma"></td></tr>
<tr><td><label for="mobile">Mobile no:.</label></td>
<td><input type="tel" name="mob"></td></tr>
</table>
<table class="t2">
<caption>Perticulars</caption>
<tr><th>Sr no</th><th>Items</th><th>Quantity</th><th>MRP</th><th>Discount(%)</th><th>Sale price</th></tr>
<tr>
<td><input type="number" name="no" value="1" readonly></td>
<td>
<input type="text" name="item" value="Strat-cut" readonly>
</td>
<td><input type="number" name="qty1" onClick="checkvalid()"></td>
<td><input type="number" name="mrp1"></td>
<td><input type="number" name="disc1"></td>
<td><input type="number" name="sp1" onMouseOver="calc_sale()"></td>
</tr>
<tr>
<td><input type="number" name="no" value="2" readonly></td>
<td><input type="text" name="item" value="Frock" readonly></td>
<td><input type="number" name="qty2" onClick="checkvalid()"></td>
<td><input type="number" name="mrp2"></td>
<td><input type="number" name="disc2"></td>
<td><input type="number" name="sp2" onMouseOver="calc_sale()"></td>
</tr>
<tr>
<td><input type="number" name="no" value="3" readonly></td>
<td><input type="text" name="item" value="Gown" readonly></td>
<td><input type="number" name="qty3" onClick="checkvalid()"></td>
<td><input type="number" name="mrp3"></td>
<td><input type="number" name="disc3"></td>
<td><input type="number" name="sp3" onMouseOver="calc_sale()"></td>
</tr>
<tr>
<td><input type="number" name="no" value="4" readonly></td>
<td><input type="text" name="item" value="Anarkali" readonly></td>
<td><input type="number" name="qty4" onClick="checkvalid()"></td>
<td><input type="number" name="mrp4"></td>
<td><input type="number" name="disc4"></td>
<td><input type="number" name="sp4" onMouseOver="calc_sale()"></td>
</tr>
<tr>
<td colspan="2"><button type="button" name="tot" value="Total price" onClick="final_price()">Total Price</button></td>
<td colspan="4"><input id="total" type="number" name="t"></td>
</tr>
</table>
</form>
</div>
</body>
</html>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
div{
position:absolute;
top:50%;
left:50%;
margin:0;
border:2px solid #3E229B;
width:60%;
transform:translate(-50% ,-50%);
background:linear-gradient(#9C4C67 70%,#6500FF);
}
h1{
text-align:center;
color:#8AE2FF;
background-color:#FF7BA2;
box-shadow:inset 5px -10px 5px #6500FF;
}
label{
padding:10px;
font-family:arial;
font-size:16pt;
}
caption{
font-size:18pt;
font-weight:bold;
color:#E5FF00;
margin:10px;
}
.t1,.t2{padding:10px;}
.t2{
border-collapse:separate;
}
th{
padding:3px;
font-size:16pt;}
.t1 input{
width:100%;
border-radius:10px 0px 10px 0px;
opacity:0.7;
outline:none;
border:2px inset #00FF00;
padding:5px;
background-color:#999999;
}
.t2 input{
width:100px;
border-radius:10px;
opacity:0.7;
outline:none;
border:2px inset #000000;
padding:5px;
background-color:#FFCEE8;
}
button{
background-color:#B93447;
width:100%;
height:50px;
font-size:18pt;
outline:none;
border:none;
border-radius:0px 0px 5px 5px;
box-shadow: 0px 10px #FFA74A;
}
button:active{
transform:scale(0.5);
box-shadow:0px 5px #FFA74A;}
#total{
width:50%;
height:30px;
font-size:18pt;
font-weight:bold;}

Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function checkvalid()
{
	var nm=document.forms["bil"]["cnma"].value;
	var mo=document.forms["bil"]["mob"].value;
	var ph=/^\d{10}$/;
		if(nm,mo=="")
		{
			alert("Please enter customer name and mobile no");
		}
		else if(!isNaN(nm))
		{
			alert("Please enter correct input");
		}
		else if(!mo.match(ph))
		{
			alert("Please enter only 10 digit in moblie no");
		}
}
function calc_sale()
{
var s=document.forms["bil"]["qty1"].value;
var a=document.forms["bil"]["mrp1"].value;
var l=document.forms["bil"]["disc1"].value;
l = (l / 100)* a;//convert % to decimal
var fp=s * (a - l);
document.forms["bil"]["sp1"].value=fp;

var x=document.forms["bil"]["qty2"].value;
var y=document.forms["bil"]["mrp2"].value;
var z=document.forms["bil"]["disc2"].value;
z= (z / 100)* y;
var p=x * (y - z);
document.forms["bil"]["sp2"].value=p;

var e=document.forms["bil"]["qty3"].value;
var f=document.forms["bil"]["mrp3"].value;
var g=document.forms["bil"]["disc3"].value;
g= (g / 100)* f;
var b=e * (f - g);
document.forms["bil"]["sp3"].value=b;

var q=document.forms["bil"]["qty4"].value;
var m=document.forms["bil"]["mrp4"].value;
var d=document.forms["bil"]["disc4"].value;
d= (d/100)* m;
var w=q * (m - d);
document.forms["bil"]["sp4"].value=w;
}
function final_price()
{
var price1=document.forms["bil"]["sp1"].value;
var price2=document.forms["bil"]["sp2"].value;
var price3=document.forms["bil"]["sp3"].value;
var price4=document.forms["bil"]["sp4"].value;
var finalprice=+price1 + +price2 + +price3 + +price4;
document.forms["bil"]["t"].value=finalprice;
}

Final output Bill generation:-





Summary
This post described digital bill creation for the desktop of a particular shop. This bill includes the customer's name and mobile number. List of items pre-defined, this owner has to enter only quantity, MRP, and discount. 
External stylesheet and script used to embed CSS and JavaScript files with HTML files.




Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments