Skip to content

Commit

Permalink
Merge pull request #26 from kratik1237/chromecertificate
Browse files Browse the repository at this point in the history 
website updated with certificate
  • Loading branch information
@Durgesh4993
Durgesh4993 authored Jul 1, 2024
2 parents 66586da + b8a52f9 commit 13d26bd
Show file tree
Hide file tree
Showing 4 changed files with 285 additions and 182 deletions.
1 change: 1 addition & 0 deletions google-ar21.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
167 changes: 99 additions & 68 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,105 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experience Certificate Generator</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experience Certificate Generator</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
</head>

<body>
<div class="container">
<div class="section">
<div id="about-us">
<strong><h1>About us</h1></strong>
<p>created this Experience Certificate Generator to simplify the process of creating professional certificates for employment verification. This free tool allows you to quickly generate a certificate with your information, saving you time and effort.</p>
<p>Feel free to try it out and let us know what you think!</p>
</div>

<h1>Experience Certificate Generator</h1>
<form id="certificateForm">
<div class="form-group">
<label for="employeeName">
<i class="fas fa-user"></i> Employee Name:
</label>
<input type="text" id="employeeName" name="employeeName" required>
</div>
<div class="form-group">
<label for="companyName">
<i class="fas fa-building"></i> Company Name:
</label>
<input type="text" id="companyName" name="companyName" required>
</div>
<div class="form-group">
<label for="duration">
<i class="fas fa-calendar-alt"></i> Duration:
</label>
<input type="text" id="duration" name="duration" required>
</div>
<div class="form-group">
<label for="designation">
<i class="fas fa-user-tie"></i> Designation:
</label>
<input type="text" id="designation" name="designation" required>
</div>
<button type="submit">Generate Certificate</button>
</form>
<div id="certificateOutput" class="certificate-preview hidden">
<h2>Experience Certificate</h2>
<div id="certificateContent"></div>
<button id="downloadBtn" class="hidden">Download</button>
</div>
</div>

<div class="section" id="contact">
<h1>Contact Me</h1> <!-- Centered heading -->
<form id="contactForm">
<div class="form-group">
<input type="text" name="Name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" name="Email" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea name="Message" rows="6" placeholder="Your Message"></textarea>
</div>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
<script src="script.js"></script>
<header>
<h1>Experience Certificate Generator</h1>
<p>Create professional experience certificates quickly and easily.</p>
</header>

<main>
<section class="form-section">
<h2>Generate Certificate</h2>
<form id="certificate-form">
<div class="form-group">
<label for="employeeName">Employee Name:</label>
<input type="text" id="employeeName" name="employeeName" required>
</div>

<div class="form-group">
<label for="companyName">Company Name:</label>
<input type="text" id="companyName" name="companyName" required>
</div>

<div class="form-group">
<label for="duration">Duration:</label>
<input type="text" id="duration" name="duration" required>
</div>

<div class="form-group">
<label for="designation">Designation:</label>
<input type="text" id="designation" name="designation" required>
</div>

<button type="button" onclick="generateCertificate()">Generate Certificate</button>
</form>
</section>

<section class="certificate-section" id="certificate-section" style="display: none;">
<div id="certificate" class="a4">
<div class="header">
<img id="cert-logo" src="/Chrome-Gaming-Certification/google-ar21.svg" alt="Company Logo">
<p id="cert-date">Date</p>
</div>
<h2>Experience Certificate</h2>
<div id="cerdiv">
<p>This is to certify that <span id="cert-employeeName"></span> has worked as a <span
id="cert-designation"></span> at <span id="cert-companyName"></span> for a duration of <span
id="cert-duration"></span>.</p>
<p>During their tenure, they have demonstrated excellent performance and contributed significantly
to the success of our organization.</p>
<p>We wish them all the best in their future endeavors.</p>
</div>
<div class="signature-section">
<p><strong>Signature</strong></p>
<h3 id="cert-companyFullName"></h3>
</div>
<div class="footer">
<div class="footer-line" id="footer-address">
<p id="cert-officeAddress">Address: 1234 Elm Street, Suite 567, City, State, 12345</p>
</div>
<div class="footer-line" id="footer-info">
<p id="cert-cin">CIN: XjzxApW6mlV0MEDU7mCFO</p>
<p id="cert-website">Website: https://www.example.com</p>
<p id="cert-phoneNumber">Phone: +1 (123) 456-7890</p>
</div>
</div>
</div>
<button id="downloadBtn" onclick="downloadCertificate()">Download</button>
</section>
</main>

<footer>
<h2>Contact Us</h2>
<form id="contact-form">
<div class="form-group">
<label for="contactName">Your Name:</label>
<input type="text" id="contactName" name="contactName" required>
</div>

<div class="form-group">
<label for="contactEmail">Your Email:</label>
<input type="email" id="contactEmail" name="contactEmail" required>
</div>

<div class="form-group">
<label for="contactMessage">Your Message:</label>
<textarea id="contactMessage" name="contactMessage" required></textarea>
</div>

<button type="submit">Submit</button>
</form>
</footer>

<script src="script.js"></script>
</body>
</html>

</html>
74 changes: 40 additions & 34 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,45 @@
document.getElementById('certificateForm').addEventListener('submit', function(e) {
e.preventDefault();

function generateCertificate() {
var employeeName = document.getElementById('employeeName').value;
var companyName = document.getElementById('companyName').value;
var duration = document.getElementById('duration').value;
var designation = document.getElementById('designation').value;

var certificateContent = `
<p>This is to certify that <strong>${employeeName}</strong> has worked as a <strong>${designation}</strong> at <strong>${companyName}</strong> for a duration of <strong>${duration}</strong>.</p>
<p>During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.</p>
<p>We wish them all the best in their future endeavors.</p>
`;

document.getElementById('certificateContent').innerHTML = certificateContent;
document.getElementById('certificateOutput').classList.remove('hidden');
document.getElementById('downloadBtn').classList.remove('hidden');
});

document.getElementById('downloadBtn').addEventListener('click', function() {
var { jsPDF } = window.jspdf;
var doc = new jsPDF();

var employeeName = document.getElementById('employeeName').value;
var companyName = document.getElementById('companyName').value;
var duration = document.getElementById('duration').value;
var designation = document.getElementById('designation').value;

var certificateText = `
This is to certify that ${employeeName} has worked as a ${designation} at ${companyName} for a duration of ${duration}.
During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.
We wish them all the best in their future endeavors.
`;

var splitText = doc.splitTextToSize(certificateText, 180);
doc.text(splitText, 10, 10);

doc.save('experience_certificate.pdf');
});
var date = new Date().toLocaleDateString();
var cinNumber = 'CIN: ' + generateRandomString(21);
var officeAddress = '1234 Elm Street, Suite 567, City, State, 12345';
var website = 'https://www.example.com';
var phoneNumber = '+1 (123) 456-7890';

document.getElementById('cert-employeeName').innerText = employeeName;
document.getElementById('cert-companyName').innerText = companyName;
document.getElementById('cert-duration').innerText = duration;
document.getElementById('cert-designation').innerText = designation;
document.getElementById('cert-date').innerText = 'Date: ' + date;
document.getElementById('cert-companyFullName').innerText = companyName;
document.getElementById('cert-cin').innerText = cinNumber;
document.getElementById('cert-officeAddress').innerText = 'Address: ' + officeAddress;
document.getElementById('cert-website').innerText = 'Website: ' + website;
document.getElementById('cert-phoneNumber').innerText = 'Phone: ' + phoneNumber;

document.getElementById('certificate-section').style.display = 'block';
}

function downloadCertificate() {
var element = document.getElementById('certificate');
html2pdf().set({
margin: 0,
filename: 'Experience_Certificate.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, windowWidth: 210*2.83, windowHeight: 297*2.83 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
}).from(element).save();
}

function generateRandomString(length) {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var result = '';
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
Loading

0 comments on commit 13d26bd

Please sign in to comment.