Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 6f919b3

Browse files
programmerrajaprogrammerraja
committedOct 31, 2021
added bill
1 parent e1dbd94 commit 6f919b3

File tree

2 files changed

+196
-0
lines changed

2 files changed

+196
-0
lines changed
 

‎bill/index.html

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<html xmlns="http://www.w3.org/1999/xhtml">
2+
<head>
3+
<title>Bill Genreator</title>
4+
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
6+
<style type="text/css">
7+
.formContainer{
8+
background: #002bff;
9+
display: flex;
10+
align-items: center;
11+
min-height: 300px;
12+
margin: auto;
13+
border-radius: 10px;
14+
max-width: 450px;
15+
flex-direction: column;
16+
}
17+
.formWrapper{
18+
margin: 10px;
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
}
23+
input{
24+
outline: none;
25+
margin: 10px;
26+
height: 25px;
27+
width: 167px;
28+
}
29+
.printButton{
30+
background: #ffe000;
31+
width: 74px;
32+
border: 0;
33+
border-radius: 4px;
34+
/* color: white; */
35+
padding: 7px;
36+
}
37+
38+
</style>
39+
</head>
40+
<body>
41+
<div class="formContainer">
42+
<div class="formWrapper">
43+
<label >Amount Of Rupee:</label>
44+
<input type="text" placeholder="Rupee..." class="inputBox amount">
45+
</div>
46+
<div class="formWrapper">
47+
<label >Donated By:</label>
48+
<input type="text" placeholder="name..." class="inputBox name">
49+
</div>
50+
<div class="formWrapper">
51+
<label >Bill NO:</label>
52+
<input type="text" placeholder="ID..." class="inputBox billNo">
53+
</div>
54+
<div class="formWrapper">
55+
<label >Date Of Donation:</label>
56+
<input type="date" class="inputBox donationDate">
57+
</div>
58+
<div class="formWrapper">
59+
<label >Month:</label>
60+
<input type="text" placeholder="month..." class="inputBox month">
61+
</div>
62+
<div style="display: flex;">
63+
<input type="button" name="Print" value="Print" class="printButton" onclick="showPreview(true)">
64+
<input type="button" name="Preview" value="Prview" class="printButton" onclick="showPreview()">
65+
</div>
66+
</div>
67+
<div class="preview"></div>
68+
69+
</body>
70+
71+
<script type="text/javascript">
72+
var doc = new jsPDF("p","pt","a3");
73+
var elementHandler = {
74+
'#ignorePDF': function (element, renderer) {
75+
return true;
76+
}
77+
};
78+
79+
var source = window.document.getElementsByTagName("body")[0];
80+
81+
82+
function showPreview(isPrint){
83+
let amount=document.querySelector(".amount").value;
84+
let name=document.querySelector(".name").value;
85+
let billNo=document.querySelector(".billNo").value;
86+
let donationDate=document.querySelector(".donationDate").value;
87+
let month=document.querySelector(".month").value;
88+
89+
let billHTML=`
90+
<!DOCTYPE html>
91+
<html>
92+
<head>
93+
<style type="text/css">
94+
95+
.billWrapper{
96+
97+
background: yellow;
98+
width: 386px;
99+
margin: 20px auto;
100+
padding: 1rem;
101+
}
102+
.billHeading {
103+
text-align: center;
104+
}
105+
.billSubHeading p{
106+
color: red;
107+
margin: 1rem;
108+
}
109+
.billAddresss{
110+
text-align: right;
111+
}
112+
.billContent{
113+
font-weight: bold;
114+
margin:1rem;
115+
margin-right:auto;
116+
}
117+
.line{
118+
border: 1px solid gray;
119+
width: 100%;
120+
}
121+
</style>
122+
</head>
123+
<body>
124+
<div class="billWrapper">
125+
<div class="billHeading">
126+
<h2>FEEDING SOULS TRUST</h2>
127+
</div>
128+
129+
<div class="billAddresss">
130+
<p>Kallidaikurichi</p>
131+
<p>Tirunelveli-627416</p>
132+
</div>
133+
134+
<div class="billSubHeading">
135+
<h4 style="text-align: center;">Donation Receipt</h4>
136+
<p>Amount Of Rupee:${amount}</p>
137+
</div>
138+
139+
<div style="display: flex;
140+
align-items: center;">
141+
<div class="billContent">
142+
<p>Donated By:${name}</p>
143+
<p></p>
144+
</div>
145+
<div class="billContent">
146+
<p>Bill No:${billNo}</p>
147+
<p></p>
148+
</div>
149+
</div>
150+
151+
<div style="display: flex;
152+
align-items: center;">
153+
<div class="billContent">
154+
<p>Date:${donationDate}</p>
155+
<p></p>
156+
</div>
157+
<div class="billContent">
158+
<p>Month:${month}</p>
159+
<p></p>
160+
</div>
161+
</div>
162+
<div class="line"></div>
163+
<div class="billFooter">
164+
<p> Thank you for your generosity. We appericate your support!</p>
165+
<p>This is computer generated document.No signature is required.</p>
166+
</div>
167+
</div>
168+
</body>
169+
</html>
170+
`
171+
172+
document.querySelector(".preview").innerHTML=billHTML;
173+
if(isPrint){
174+
// doc.addHTML(
175+
// billHTML,
176+
// 15,
177+
// 15,
178+
// {
179+
// 'width': 180,'elementHandlers': elementHandler
180+
// });
181+
// doc.save(`${name}-bill.pdf`);
182+
183+
// doc.output("dataurlnewwindow");
184+
var printWindow = window.open('', '', 'height=400,width=800');
185+
printWindow.document.write('<html><head><title>DIV Contents</title>');
186+
printWindow.document.write('</head><body >');
187+
printWindow.document.write(billHTML);
188+
printWindow.document.write('</body></html>');
189+
printWindow.document.close();
190+
printWindow.print();
191+
}
192+
193+
}
194+
</script>
195+
</html>

‎resume/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
</head>
1818
<body>
1919
<iframe src="Resume.pdf" />
20+
<!-- <embed src="Resume.pdf" type="application/pdf" width="100%" height="600px" /> -->
2021

2122

2223
</body>

0 commit comments

Comments
 (0)
Please sign in to comment.