Skip to content

Commit f3350eb

Browse files
tomarcodinglifetomarcodinglife
committed
updated
1 parent 8a5aa04 commit f3350eb

9 files changed

Lines changed: 712 additions & 0 deletions

File tree

26_miniproject/index.html renamed to 26_miniproject/project01/index.html

File renamed without changes.

26_miniproject/script.js renamed to 26_miniproject/project01/script.js

File renamed without changes.

26_miniproject/style.css renamed to 26_miniproject/project01/style.css

File renamed without changes.

‎26_miniproject/project02/index.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Bonafide Certificate Generator</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
9+
</head>
10+
<body>
11+
12+
<div class="header">
13+
<h1>BUDDHA INSTITUTE OF TECHNOLOGY</h1>
14+
<h3>Industrial Area, Gaya</h3>
15+
<h2>Bonafide Generator</h2>
16+
</div>
17+
18+
<div class="input-form">
19+
<div class="form-group">
20+
<label for="student-name">Name:</label>
21+
<input type="text" id="student-name" placeholder="Rohit Kumar" />
22+
</div>
23+
24+
<div class="form-group">
25+
<label for="fathers-name">Father's Name:</label>
26+
<input type="text" id="fathers-name" placeholder="Ramesh Kumar" />
27+
</div>
28+
29+
<div class="form-group">
30+
<label for="session">Session:</label>
31+
<input type="text" id="session" placeholder="2020-23" />
32+
</div>
33+
34+
<div class="form-group">
35+
<label for="course">Course:</label>
36+
<select id="course">
37+
<option value="B.Tech Engineering">B.Tech Engineering</option>
38+
<option value="Polytechnic Engineering">Polytechnic Engineering</option>
39+
</select>
40+
</div>
41+
42+
<div class="form-group">
43+
<label for="branch-select">Branch:</label>
44+
<select id="branch-select">
45+
<option value="Civil Engineering">Civil Engineering</option>
46+
<option value="Electrical Engineering">Electrical Engineering</option>
47+
<option value="Computer Science & Engineering">Computer Science & Engineering</option>
48+
<option value="Mechanical Engineering">Mechanical Engineering</option>
49+
<option value="Electronics Engineering">Electronics Engineering</option>
50+
</select>
51+
</div>
52+
53+
<div class="form-group">
54+
<label for="roll-no">Roll No:</label>
55+
<input type="text" id="roll-no" placeholder="123456" />
56+
</div>
57+
58+
<div class="form-group">
59+
<label for="semester">Promoted Semester:</label>
60+
<input type="text" id="semester" placeholder="6th" />
61+
</div>
62+
63+
<div class="form-group">
64+
<label for="fee">Fee Payable:</label>
65+
<input type="text" id="fee" placeholder="87100/-" />
66+
</div>
67+
68+
<div class="form-group">
69+
<label for="is-late">Is session running late?</label>
70+
<select id="is-late">
71+
<option value="no">No</option>
72+
<option value="yes">Yes</option>
73+
</select>
74+
</div>
75+
76+
<div class="form-group">
77+
<label for="backlog">Reason for delay (if any):</label>
78+
<input type="text" id="backlog" placeholder="Backlog in 4th sem" />
79+
</div>
80+
81+
<div class="button-group">
82+
<button id="generate-btn">Generate Certificate</button>
83+
<!-- <button id="download-btn" class="hidden">Download PDF</button> -->
84+
</div>
85+
86+
</div>
87+
88+
<div id="certificate" class="hidden">
89+
90+
<div id="refdate">
91+
<p><strong>Ref. No.:-</strong> <span id="refNo"></span></p>
92+
<p><strong>Date:</strong> <span id="certDate"></span></p>
93+
</div>
94+
95+
<h2 class="text-center">TO WHOM IT MAY CONCERN</h2>
96+
97+
<p>
98+
Certified that <strong><span id="certStudent"></span></strong> S/o
99+
<strong><span id="certFather"></span></strong> had been admitted during
100+
the session <strong><span id="certSession"></span></strong> in the branch of
101+
<strong><span id="certBranch"></span></strong> bearing Roll No –
102+
<strong><span id="certRoll"></span></strong>. He is a bonafide student of
103+
this institution. He is promoted to <strong><span id="certSemester"></span></strong>
104+
Semester. The 3rd Year dues payable fee will be <strong><span id="certFee"></span></strong>.
105+
</p>
106+
107+
<p>
108+
This Institute has been recognized by A.I.C.T.E through their F.No.
109+
Northern/1-43657927785/2024/EOA, dated: 08-May-2024 & affiliated to
110+
SBTE, Patna, Bihar affiliation no. KK(SBTE)02/2022(Part-4)-2957/Patna,
111+
Dated-30.07.2024 and subsequently recognized by Department of Science &
112+
Technology, Govt. of Bihar, Patna.
113+
</p>
114+
115+
<p id="backlog-line" style="display: none;">
116+
Session has been running late due to <span id="certBacklog">backlog in 4th sem</span>.
117+
</p>
118+
119+
<p>
120+
<strong>Account Holder Name</strong> – Buddha Polytechnic Institute<br />
121+
<strong>Bank Name</strong> – State Bank of India<br />
122+
<strong>Address</strong> – Gandhi Maidan, Gaya<br />
123+
<strong>Account No.</strong> – 36922955550<br />
124+
<strong>IFSC</strong> – SBIN0006553
125+
</p>
126+
127+
<div class="signature">Principal</div>
128+
129+
<div class="button-group">
130+
<button id="download-btn" class="hidden">Download PDF</button>
131+
</div>
132+
133+
</div>
134+
135+
<script src="script.js"></script>
136+
</body>
137+
</html>

‎26_miniproject/project02/script.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
document.getElementById('generate-btn').addEventListener('click', () => {
2+
const name = document.getElementById('student-name').value;
3+
const father = document.getElementById('fathers-name').value;
4+
const session = document.getElementById('session').value;
5+
const branch = document.getElementById('branch-select').value;
6+
const roll = document.getElementById('roll-no').value;
7+
const semester = document.getElementById('semester').value;
8+
const fee = document.getElementById('fee').value;
9+
const backlog = document.getElementById('backlog').value;
10+
const isLate = document.getElementById('is-late').value;
11+
12+
document.getElementById('certStudent').innerText = name;
13+
document.getElementById('certFather').innerText = father;
14+
document.getElementById('certSession').innerText = session;
15+
document.getElementById('certBranch').innerText = branch;
16+
document.getElementById('certRoll').innerText = roll;
17+
document.getElementById('certSemester').innerText = semester;
18+
document.getElementById('certFee').innerText = fee;
19+
20+
// Show backlog line only if selected
21+
if (isLate === 'yes') {
22+
document.getElementById('certBacklog').innerText = backlog || 'backlog in 4th sem';
23+
document.getElementById('backlog-line').style.display = 'block';
24+
} else {
25+
document.getElementById('backlog-line').style.display = 'none';
26+
}
27+
28+
// Set reference number
29+
const refSession = session.split('-').map(s => s.slice(-2)).join('');
30+
document.getElementById('refNo').innerText = `BIT/ADM/DIP/2025/${branch}/${refSession}`;
31+
32+
// Set current date
33+
document.getElementById('certDate').innerText = new Date().toLocaleDateString('en-GB');
34+
35+
// Show certificate and enable download button
36+
const certificateDiv = document.getElementById('certificate');
37+
certificateDiv.style.display = 'block';
38+
const downloadButton = certificateDiv.querySelector('#download-btn');
39+
downloadButton.classList.remove('hidden');
40+
});
41+
42+
document.getElementById('download-btn').addEventListener('click', () => {
43+
const cert = document.getElementById('certificate');
44+
45+
// Ensure certificate is visible
46+
cert.style.display = 'block';
47+
48+
// Small delay to allow DOM to paint before capturing
49+
setTimeout(() => {
50+
const opt = {
51+
margin: 0.5,
52+
filename: 'bonafide_certificate.pdf',
53+
image: { type: 'jpeg', quality: 0.98 },
54+
html2canvas: { scale: 2 },
55+
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
56+
};
57+
58+
html2pdf().set(opt).from(cert).save();
59+
console.error("errpr", err);
60+
}, 500);
61+
});

‎26_miniproject/project02/style.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
6+
}
7+
8+
body {
9+
background-color: #f5f7fa;
10+
color: #333;
11+
padding: 20px;
12+
}
13+
14+
.header {
15+
text-align: center;
16+
margin-bottom: 30px;
17+
}
18+
19+
.header h1 {
20+
color: #2c3e50;
21+
font-size: 2rem;
22+
}
23+
24+
.header h3 {
25+
color: #555;
26+
margin-top: 5px;
27+
}
28+
29+
.header h2 {
30+
margin-top: 10px;
31+
font-size: 1.4rem;
32+
color: #222;
33+
}
34+
35+
.input-form {
36+
max-width: 600px;
37+
margin: auto;
38+
background-color: #ffffff;
39+
padding: 25px 30px;
40+
border-radius: 10px;
41+
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
42+
}
43+
44+
.form-group {
45+
margin-bottom: 15px;
46+
}
47+
48+
.form-group label {
49+
display: block;
50+
font-weight: 600;
51+
margin-bottom: 5px;
52+
}
53+
54+
.form-group input,
55+
.form-group select {
56+
width: 100%;
57+
padding: 10px;
58+
font-size: 1rem;
59+
border: 1px solid #ccc;
60+
border-radius: 6px;
61+
transition: border-color 0.3s;
62+
}
63+
64+
.form-group input:focus,
65+
.form-group select:focus {
66+
border-color: #2980b9;
67+
outline: none;
68+
}
69+
70+
button {
71+
padding: 10px 15px;
72+
margin-right: 10px;
73+
font-size: 0.95rem;
74+
border: none;
75+
border-radius: 6px;
76+
cursor: pointer;
77+
background-color: #3498db;
78+
color: white;
79+
transition: background-color 0.3s;
80+
}
81+
82+
button:hover {
83+
background-color: #2980b9;
84+
}
85+
86+
.button-group {
87+
margin-top: 20px;
88+
text-align: center;
89+
}
90+
91+
.button-group button {
92+
margin: 5px;
93+
}
94+
95+
#certificate {
96+
max-width: 800px;
97+
margin: 40px auto;
98+
background-color: #fff;
99+
padding: 30px;
100+
border-radius: 10px;
101+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
102+
display: none;
103+
}
104+
105+
#certificate h2.text-center {
106+
text-align: center;
107+
color: #2c3e50;
108+
margin-bottom: 20px;
109+
}
110+
111+
#certificate p {
112+
margin-bottom: 15px;
113+
line-height: 1.6;
114+
font-size: 1rem;
115+
}
116+
117+
#refdate {
118+
display: flex;
119+
justify-content: space-between;
120+
margin-bottom: 15px;
121+
flex-wrap: wrap;
122+
}
123+
124+
.signature {
125+
margin-top: 40px;
126+
text-align: right;
127+
font-weight: bold;
128+
font-size: 1.1rem;
129+
}
130+
131+
.hidden {
132+
display: none;
133+
}
134+
135+
@media (max-width: 768px) {
136+
.input-form,
137+
#certificate {
138+
padding: 20px;
139+
}
140+
141+
#refdate {
142+
flex-direction: column;
143+
gap: 10px;
144+
}
145+
146+
button {
147+
width: 100%;
148+
margin-bottom: 10px;
149+
}
150+
151+
152+
}
153+

0 commit comments

Comments
 (0)