How To Create a Certificate Generator Website in JavaScript

If you want to Get certificate got to https://certificate-generator.netlify.app/ .this Create a certificate generator you an download it certificate in pdf format.Now we see how we have to make it. We have made it Html, CSS and JavaScript. this is going to be very easy.
First we need a template and We need a template in a PDF format. Here I used Canva Website. Go to Canva.com create an account first then search for certificate.

There you will get a lot of certificates. select what you like and download it.And customize that template according to you.I used this template here

here we open our code editor. And here we create an index.html,style.css and index.js file.First we make the front-end
*index.html
*



<!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Certificate Generator using javascript</title>  
   <link rel="stylesheet" href="style.css">  
   <link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow&display=swap" rel="stylesheet">  
   <link rel="icon" type="image/png" href="favicon.png"/>  
 </head>  
 <body>  
   <header>  
     <div class="heading_text">  
       <h1>Create Certificates for Free in Minutes</h1>  
       <h2>Make unique certificates in minutes. No design skills needed.</h2>  
     </div>  
   </header>  
   <main>  
     <div>  
       <input type="text" name="Name" class="question" id="name" required autocomplete="off" />  
       <label for="name"><span>What's your name?</span></label>  
       <input type="submit" id="submitBtn" value="Get Certificate"/>  
     </div>  
   </main>  
   <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>  
   <script src="https://unpkg.com/@pdf-lib/fontkit@0.0.4"></script>  
   <script src="filesaver.js"></script>  
   <script src="index.js"></script>  
 </body>  
 </html>

now style.css



*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;

    /* font-size: 1.5em; */
}

header{
    padding: 150px;
    background-image: url('bg_header.jfif');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;

    text-align: center;
    position: relative;
}
 .heading_text h1{
    text-align: center;
    font-size: 54px;
    margin-bottom:10px
    /* font-weight: 900; */
} 
main {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  main form button{
      margin-top:25px ;
  }
  button {
    background: #8bc34a;
    color: #fff;
    border: none;
    font-size: 0.8em;
    padding: 15px 15px;
    /* margin: 20px; */
    border-radius: 5px;
    cursor: pointer;
  }
input,
span,
label{
  font-family: 'Ubuntu', sans-serif;
  display: block;
  margin: 10px;
  padding: 5px;
  border: none;
  font-size: 22px;
}
input:focus {
    outline: 0;
  }
input.question{
  font-size: 48px;
  font-weight: 300;
  border-radius: 2px;
  margin: 0;
  border: none;
  width: 80%;
  background: rgba(0, 0, 0, 0);
  transition: padding-top 0.2s ease, margin-top 0.2s ease;
  overflow-x: hidden;
}
input.question + label{
  display: block;
  position: relative;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  width: 10%;
  border-top: 1px solid red;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
  height: 0px;
}
input.question:focus + label{
  width: 80%;
}
input.question:focus,
input.question:valid {
  padding-top: 35px;
}

input.question:focus + label > span,
input.question:valid + label > span {
  top: -100px;
  font-size: 22px;
  color: #333;
}



input.question:valid + label {
  border-color: green;
}

input.question:invalid{
  box-shadow: none;
}

input.question + label > span{
  font-weight: 300;
  margin: 0;
  position: absolute;
  color: #8F8F8F;
  font-size: 48px;
  top: -66px;
  left: 0px;
  z-index: -1;
  -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

input[type="submit"] {
    background: #8bc34a;
    color: #fff;
    border: none;
    font-size: 0.8em;
    padding: 15px 15px;
    /* margin: 20px; */
    border-radius: 5px;
    cursor: pointer;
}

Now we write the code in index.js,First of all we are going to use a library here, its name is pdf lib– pdf-lib.js.org.From this library, we will fetch the PDF and with the help of JavaScript, we will put the text there. The text that we are going to put here We will download a font here Go to https://fonts.google.com/ And search the font Sanchez and download it.

First we need to fetch pdf



const generatePDF = async (name) => {
    const existingPdfBytes = await fetch("Certificate.pdf").then((res) =>
      res.arrayBuffer()
    );

    // Load a PDFDocument from the existing PDF bytes
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    pdfDoc.registerFontkit(fontkit);

Now we have write the code for the custom font



const generatePDF = async (name) => {
    const existingPdfBytes = await fetch("Certificate.pdf").then((res) =>
      res.arrayBuffer()
    );

    // Load a PDFDocument from the existing PDF bytes
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    pdfDoc.registerFontkit(fontkit);


  //get font
  const fontBytes = await fetch("Sanchez-Regular.ttf").then((res) =>
  res.arrayBuffer()
);

Draw a string of text diagonally across the first



// Embed our custom font in the document
  const SanChezFont  = await pdfDoc.embedFont(fontBytes);
   // Get the first page of the document
   const pages = pdfDoc.getPages();
   const firstPage = pages[0];

   // Draw a string of text diagonally across the first page
   firstPage.drawText(name, {
     x: 300,
     y: 270,
     size: 58,
     font: SanChezFont ,
     color: rgb(0.2, 0.84, 0.67),
   });

When after entering name in the certificate, now we have to download the certificate.We are going to use the filesaver.js library to download the certificate.

Goto link https://github.com/eligrey/FileSaver.js After opening the link, go to the dist. folder and download FileSaver.js file

Now write code for download certificate



// Serialize the PDFDocument to bytes (a Uint8Array)
  const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
  saveAs(pdfDataUri,"newcertificate.pdf")

All index.js code Here



console.log("hello")
const userName = document.getElementById("name");
const submitBtn = document.getElementById("submitBtn");
const { PDFDocument, rgb, degrees } = PDFLib;


submitBtn.addEventListener("click", () => {
    const val =userName.value;
    if (val.trim() !== "" && userName.checkValidity()) {
        // console.log(val);
        generatePDF(val);
      } else {
        userName.reportValidity();
      }
});
const generatePDF = async (name) => {
    const existingPdfBytes = await fetch("Certificate.pdf").then((res) =>
      res.arrayBuffer()
    );

    // Load a PDFDocument from the existing PDF bytes
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    pdfDoc.registerFontkit(fontkit);


  //get font
  const fontBytes = await fetch("Sanchez-Regular.ttf").then((res) =>
  res.arrayBuffer()
);
  // Embed our custom font in the document
  const SanChezFont  = await pdfDoc.embedFont(fontBytes);
   // Get the first page of the document
   const pages = pdfDoc.getPages();
   const firstPage = pages[0];

   // Draw a string of text diagonally across the first page
   firstPage.drawText(name, {
     x: 300,
     y: 270,
     size: 58,
     font: SanChezFont ,
     color: rgb(0.2, 0.84, 0.67),
   });

  // Serialize the PDFDocument to bytes (a Uint8Array)
  const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
  saveAs(pdfDataUri,"newcertificate.pdf")
};

Now ready the certificate generator website

if you want to full source code please visit Rocoderes

Blog

How To Create a Certificate Generator Website in JavaScript

Rocoderes

Join Our Newsletter. No Spam, Only the good stuff.

Related