Skip to content

Commit de5bce0

Browse files
PB2204PB2204
committed
7th Update
1 parent b9ec462 commit de5bce0

File tree

6 files changed

+1301
-17
lines changed

6 files changed

+1301
-17
lines changed

‎Certificate/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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>Beautiful Certificate</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="certificate">
11+
<div class="header">
12+
<h1>Certificate of Achievement</h1>
13+
</div>
14+
<div class="content">
15+
<p>This certificate is awarded to:</p>
16+
<h2 id="recipientName">[Recipient's Name]</h2>
17+
<p>For outstanding performance and dedication in the field of...</p>
18+
<p>Date: July 23, 2023</p>
19+
</div>
20+
<div class="signature">
21+
<p>Signature</p>
22+
</div>
23+
</div>
24+
25+
<button id="generateCertificate">Generate Certificate</button>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎Certificate/script.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Function to update the recipient's name dynamically
2+
function updateRecipientName() {
3+
const recipientNameElement = document.getElementById('recipientName');
4+
const recipientNameInput = prompt('Enter the recipient\'s name:');
5+
if (recipientNameInput) {
6+
recipientNameElement.textContent = recipientNameInput;
7+
}
8+
}
9+
10+
// Function to generate and download the certificate as a PDF
11+
function downloadCertificate() {
12+
const certificate = document.querySelector('.certificate');
13+
const opt = {
14+
margin: 0,
15+
filename: 'certificate.pdf',
16+
image: { type: 'jpeg', quality: 0.98 },
17+
html2canvas: { scale: 2 },
18+
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
19+
};
20+
21+
html2pdf().from(certificate).set(opt).outputPdf().then((pdf) => {
22+
pdf.save();
23+
});
24+
}
25+
26+
// Event listener to update recipient's name
27+
document.getElementById('generateCertificate').addEventListener('click', updateRecipientName);
28+
29+
// Event listener to generate and download the certificate as PDF
30+
document.getElementById('generateCertificate').addEventListener('click', downloadCertificate);

‎Certificate/style.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
background-color: #f0f0f0;
10+
}
11+
12+
.certificate {
13+
width: 80%;
14+
max-width: 600px;
15+
background-color: #f9f6f6;
16+
background-image: linear-gradient(147deg, #ff8a00 0%, #e52e71 100%);
17+
color: #fff;
18+
border: 2px solid #fff;
19+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
20+
padding: 20px;
21+
}
22+
23+
.header {
24+
text-align: center;
25+
margin-bottom: 20px;
26+
}
27+
28+
.header h1 {
29+
font-size: 24px;
30+
margin: 0;
31+
padding: 5px 0;
32+
color: #fff;
33+
border-bottom: 2px solid #fff;
34+
}
35+
36+
.content {
37+
text-align: center;
38+
}
39+
40+
.content p {
41+
font-size: 16px;
42+
color: #fff;
43+
}
44+
45+
.content h2 {
46+
font-size: 28px;
47+
color: #fff;
48+
margin-top: 10px;
49+
margin-bottom: 20px;
50+
}
51+
52+
.signature {
53+
text-align: center;
54+
margin-top: 30px;
55+
}
56+
57+
.signature p {
58+
font-size: 18px;
59+
font-style: italic;
60+
color: #fff;
61+
}
62+
63+
button {
64+
display: block;
65+
margin: 20px auto;
66+
padding: 10px 20px;
67+
font-size: 16px;
68+
border: none;
69+
background-color: #fff;
70+
color: #555;
71+
cursor: pointer;
72+
border-radius: 5px;
73+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
74+
transition: background-color 0.3s ease;
75+
}
76+
77+
button:hover {
78+
background-color: #ddd;
79+
}

0 commit comments

Comments
 (0)