JavaScript/dom9.html at main · sudeepnagar/JavaScript · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="em">
<head>
      <meta charset="UTF-8">
      <script>

	  </script>

	  <style>
	    .container{
		  display:inline-block;
		  border:1px solid black;
		  font-size:110%;
		 /* font-weight:bold;*/
		}
		.container button,input{
		    border:none;
			outline:none;
		}

		input{
		  width:50px;
		  text-align:center;
		}
	  </style>
	  <title>DOM</title>
</head>
<body>
     <div>
	      <img src="bike.jpg" width="150px" height="150px">
		  <h4>Bskjlasdhfasdf asldkfjs lsdjf</h4>
		  <h4>Begumpet</h4>
		  <h4>Bskjlasdhfasdf hot &nbsp; &nbsp; :&#8477;200</h4>

		  <div class ="container">
		     <button id="decre">-</button>
			 <input type="text" id="qty" value="0">
			 <button id="incre" >+ </button>

		  </div>
		  <br>
		  <strong>Bill Details:</strong><br>
		  <span>Item Tatal &nbsp; &nbsp;</span>
		  <output id="itemTotal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &#8377;0</output>
		  <br>
		  <span>GST & Charges &nbsp; &nbsp;</span>
		  <output id="gst">&nbsp; &nbsp; &#8377;0</output><br>
		   <strong>To Pay &nbsp; &nbsp; &nbsp; &nbsp;
		   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong>
		  <output id="totamt">&nbsp; &nbsp; &#8377;0</output><br>


	 </div>

     <script>
         let tamt, txt, iamt;

		 //- button code
		 document.querySelector("#decre").onclick=function(){
		       if(+qty.value>0)
		       qty.value--;

			   iamt=qty.value*200;
			   tax=iamt*0.8;
			   tamt=iamt+tax;
			   itemTotal.innerHTML=`&#8377; ${iamt}`
			   gst.innerHTML=`&#8377; ${tax}`
			   totamt.innerHTML=`&#8377; ${tamt}`
		 }

		 //+ button code
		 document.querySelector("#incre").onclick=function(){
		       qty.value++;

			   iamt=qty.value*200;
			   tax=iamt*0.08;
			   tamt=iamt+tax;
			   itemTotal.innerHTML=`&#8377; ${iamt}`
			   gst.innerHTML=`&#8377; ${tax}`
			   totamt.innerHTML=`&#8377; ${tamt}`
		 }
		</script>
</body>
</html>