Asp.net modules
  • Home
  • c# Modules
  • Web Design
    • Html
    • Css
    • Java Script
  • Bootstrap
  • Sql
    • Queries
    • Stored Procedures
  • About Me
    • About Myself
    • My Projects
    • My Resume
  • Photo Gallery

Sunday, October 11, 2015

How To Make A Bill with JavaScript

 Unknown     10:08 AM     js     No comments   

Introduction:-

Hii Friends....

Today I explain how to make a bill using simple html and javascript . Here i use some functions and some html part for designing purpose . So here I explain step by step this task.

Step:1    The designing code goes here.

<head>
<title> Asp.Net Modules </title>
</head>
<center>
<script type="text/javascript">
function pp()
{
 window.print();
}
</script>
<script type="text/javascript">
function pizza()
{
if(document.getElementById('p1').checked==true)
{
 var a=document.getElementById('i1').value;
 var b=document.getElementById('q1').value;
 if(b=="")
 {
 alert("Enter qua");
 }
 else
 {

 var c=Number(a)*Number(b);
 document.getElementById('a1').value=c;
 }
 }
}
function burger()
{
  
 var a=document.getElementById('i2').value;
 var b=document.getElementById('q2').value;
 if(b=="")
 {
 alert("Enter qua");
 }
 else
 {

 var c=Number(a)*Number(b);
 document.getElementById('a2').value=c;
 }
}
function sticks()
{
 var a=document.getElementById('i3').value;
 var b=document.getElementById('q3').value;
 if(b=="")
 {
 alert("Enter qua");
 }
 else
 {

 var c=Number(a)*Number(b);
 document.getElementById('a3').value=c;
 }
}
function frenchfry()
{
 var a=document.getElementById('i4').value;
 var b=document.getElementById('q4').value;
 if(b=="")
 {
 alert("Enter qua");
 }
 else
 {

 var c=Number(a)*Number(b);
 document.getElementById('a4').value=c;
 }
}
function totalamount()
{
  var a=document.getElementById('a1').value;
  var b=document.getElementById('a2').value;
  var c=document.getElementById('a3').value;
  var d=document.getElementById('a4').value;
  var tt=Number(a)+Number(b)+Number(c)+Number(d);
  document.getElementById('total').value=tt;
var abc=document.getElementById('tp').value;
var per=tt*abc/100; 
document.getElementById('per').value=per;


var cc=Number(tt)+Number(per); 
 document.getElementById('gross').value=cc;
 }
</script>
<table border=2 bgcolor=gray>
<tr>
<td>Name of Rec</td>
<td><input type=text id=n value=Name onfocus="if(this.value=='Name'){this.value=''}"onblur="if(this.value==''){this.value='Name'}"></td>
</tr>
<tr>
<td>Time</td>
<td><input type=text id=c></td>
<td><input type=button value=print onclick=pp()></td>
</tr>
<tr>
<table border=2>
<tr>
<td>ItemName</td>
<td>Price</td>
<td>Qua</td>
<td >Amount</td>
</tr>
<tr>
<td>
<input type=checkbox id=p1 onchange=pizza()>Pizza
</td>
<td><input type=text value="100" id=i1 disabled></td>
<td><input type=text id=q1></td>
<td><input type=text id=a1 disabled></td>
</tr>
<tr>
<td>
<input type=checkbox id=p2 onchange=burger()>Burger
</td>
<td><input type=text value="100" id=i2 disabled></td>
<td><input type=text id=q2></td>
<td><input type=text id=a2 disabled></td>
</tr>
<tr>
<td>
<input type=checkbox id=p3 onchange=sticks()>Sticks
</td>
<td><input type=text value="100" id=i3 disabled></td>
<td><input type=text id=q3></td>
<td><input type=text id=a3 disabled></td>
</tr>
<tr>
<td>
<input type=checkbox id=p4 onchange=frenchfry()>FrenchFry
</td>
<td><input type=text value="100" id=i4 disabled></td>
<td><input type=text id=q4></td>
<td><input type=text id=a4 disabled></td>
</tr>
<tr>
<td colspan=3>
<div align=right>
TOTAL
</div>
</td><td><input type=text id=total disabled></td>
</tr>
<tr>
<td colspan=2>Enter Tax Per
</td>
<td><input type=text id=tp value="12">
</td>

<td>
<input type=text id=per disabled>
</td>
</tr>
<tr>   
<td colspan=3 ><div align=right><input type=button value=pay onclick=totalamount()></td>
</div>


<td>
<input type=text id=gross disabled>
</td>
</tr>
<tr>
<tr></tr>
</tr>         
</table>
</tr>
</table>
<script type="text/javascript">
function clock() 
{
   var now = new Date();
   var outStr = now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
   document.getElementById('c').value=outStr;
   setTimeout('clock()',1000);
}
clock();
</script>

</center>

Demo :-

                                                [1]   Firstly enter the quantity of the items.


  [2]   Check that items you want .


  [3]   Click on pay button and you can get print of the bill.



  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Popular Posts

  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • How to make a hit-dot game in Asp.net using Java-Script
        Introduction: Hi.. Friends, Today I explain that how to make a game in asp-dot net without using any database. Its so simple ...
  • Create a Cart Popup div in HTML & CSS
    Intoduction :-   Hii Friends... Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when y...
  • How to create pikachu character using HTML & CSS
    Hii Friends... Today I explain how to create cartoon( Pikachu character) using HTML and CSS . you can use this code in your project cop...
  • Auto-Hiding Navbar with Javascript
    Intoduction :-   Hii Friends... today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • How To scroll from bottom to top
    Intoduction :- Hii Friends...   Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jque...
  • How to create Animation Using HTML & CSS
    Hii Friends... Today I explain how to create Animations using HTML and CSS . you can use this code in your project copy this code and p...
  • How To Make Semi-Transparent Buttons
    Intoduction :-   Hii Friends...   Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes t...
  • List Style
    Intoduction :-   Hii Friends... Html have 2 types of list . Ordered List and Unordered List. If you are required to put your items in a n...

Blog Archive

  • ►  2017 (13)
    • ►  December (1)
    • ►  March (5)
    • ►  February (1)
    • ►  January (6)
  • ►  2016 (31)
    • ►  November (1)
    • ►  September (1)
    • ►  June (6)
    • ►  May (3)
    • ►  April (2)
    • ►  March (8)
    • ►  February (9)
    • ►  January (1)
  • ▼  2015 (31)
    • ►  December (3)
    • ►  November (4)
    • ▼  October (18)
      • How to make over-out event with js
      • How to convert lower case to upper case
      • How to rotate the image with Css
      • How to make Zoom-in and Zoom-out image with Css
      • How to make hover on a image with css
      • How To Make Tables In Sql
      • How to fill dropdown with one dropdown click
      • How To Make A Bill with JavaScript
      • How To Make A Timer With JavaScript
      • How To Make A Calculator In Html
      • How To Create a Carousel In Bootstrap
      • Basic of css.
      • How to make a image responsive in bootstrap
      • How to make a nav-bar in bootstrap
      • How to use well in bootstrap
      • How to make a jumborton in bootstrap
      • Basic of html
      • How to Make Glyphicon in bootstrap
    • ►  September (6)

About Me

Unknown
View my complete profile

Copyright © Asp.net modules | Powered by Blogger
Design by Sheetal Khandelwal