31 C
Gujarat
HomeJavascriptCreate a Certificate Generator Website in JavaScript

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.
 
canva.com
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
templete

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/[email protected]"></script>  
   <script src="filesaver.js"></script>  
   <script src="index.js"></script>  
 </body>  
 </html>  

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 libpdf-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()
    );

After that we have to load 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

source code

https://github.com/patelrohan750/certificate_generator

👉 If you want to clear the basic concepts of JavaScript you must read this:
15 JavaScript Basic Concepts You Should Know

RELATED ARTICLES

112 COMMENTS

  1. I’m really enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and
    visit more often. Did you hire out a developer to create your theme?
    Exceptional work!

  2. Hello There. I found your blog using msn. This is a very well written article.
    I will be sure to bookmark it and come back to read more
    of your useful info. Thanks for the post. I’ll definitely comeback.

  3. Today, I went to the beach with my kids. I found a sea shell and gave it to my 4
    year old daughter and said “You can hear the ocean if you put this to your ear.”
    She put the shell to her ear and screamed. There
    was a hermit crab inside and it pinched her ear. She never wants to go back!
    LoL I know this is completely off topic but I had to tell someone!

  4. I’ve learn several excellent stuff here. Definitely worth bookmarking for revisiting.
    I surprise how so much effort you set to make this
    type of magnificent informative site.

  5. I’m really loving the theme/design of your site.

    Do you ever run into any internet browser compatibility problems?
    A handful of my blog audience have complained about my site not working correctly
    in Explorer but looks great in Safari. Do you have any tips to help fix this problem?

  6. Attractive part of content. I simply stumbled upon your website and in accession capital to assert that I
    acquire actually loved account your weblog posts. Any way I’ll be subscribing to your
    feeds and even I fulfillment you get right
    of entry to consistently quickly.

  7. Hiya, I am really glad I’ve found this information. Nowadays bloggers publish only about gossips and web and this is really frustrating. A good web site with exciting content, this is what I need. Thank you for keeping this web-site, I’ll be visiting it. Do you do newsletters? Can’t find it.

  8. Hello there, just became aware of your blog through Google, and found that it
    is really informative. I am gonna watch out for brussels.
    I’ll appreciate if you continue this in future. Numerous people will be benefited from your writing.
    Cheers!

  9. Wow, fantastic blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look
    of your web site is fantastic, let alone the content!

  10. I was curious if you ever thought of changing
    the page layout of your site? Its very well written; I love
    what youve got to say. But maybe you could a little more in the way of content so people could connect
    with it better. Youve got an awful lot of text for only having 1 or two pictures.

    Maybe you could space it out better?

  11. I have been browsing online more than 4 hours today, yet I never found
    any interesting article like yours. It is pretty worth enough for me.
    Personally, if all web owners and bloggers made good content
    as you did, the net will be a lot more useful than ever before.

  12. Hello! I could have sworn I’ve been to this site before
    but after browsing through some of the post I realized it’s new to me.

    Nonetheless, I’m definitely glad I found it and I’ll be bookmarking and checking back
    often!

  13. Thanks for one’s marvelous posting! I truly enjoyed reading it, you happen to be a great author.I
    will always bookmark your blog and definitely will come back from now on. I
    want to encourage you continue your great job, have a nice morning!

  14. Hello there! This blog post could not be written much better!
    Looking through this article reminds me of my previous roommate!
    He constantly kept talking about this. I am going to forward this article to him.
    Fairly certain he’ll have a great read. Many thanks for sharing!

  15. Hey! This post could not be written any better! Reading through this post
    reminds me of my good old room mate! He always kept chatting about this.
    I will forward this article to him. Pretty sure he
    will have a good read. Thanks for sharing!

  16. I was suggested this web site by means of my cousin. I am not certain whether this submit
    is written by means of him as nobody else realize such unique about
    my trouble. You’re wonderful! Thank you!

  17. Wow, awesome blog layout! How long have you been blogging for?

    you made blogging look easy. The overall look of your website is wonderful, let alone the content!

  18. Every weekend i used to go to see this website, as i want enjoyment,
    for the reason that this this web page conations truly pleasant funny stuff too.

  19. Hi great website! Does running a blog such as this take
    a large amount of work? I have very little expertise in programming however I
    was hoping to start my own blog in the near future.
    Anyhow, should you have any suggestions or tips for new blog owners please share.
    I know this is off topic however I just had to ask.
    Kudos!

  20. You actually make it seem so easy with your presentation but I
    find this topic to be really something which I think I would never understand.
    It seems too complex and very broad for me.
    I’m looking forward for your next post, I’ll try to get the
    hang of it!

  21. Hi there just wanted to give you a quick heads up and let you know a few of the images aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same outcome.

  22. Hi, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam responses? If so how do you protect against it, any plugin or anything you can advise? I get so much lately it’s driving me crazy so any help is very much appreciated.

  23. Hi! I could have sworn I’ve visited this website before but after browsing through some of the articles I
    realized it’s new to me. Anyhow, I’m certainly pleased I came across it and I’ll be bookmarking it and checking back regularly!

  24. I’m amazed, I must say. Seldom do I come across a blog that’s both educative and
    engaging, and let me tell you, you’ve hit the nail on the head.
    The issue is an issue that too few folks are speaking intelligently about.
    I am very happy that I stumbled across this in my search for something concerning this.

  25. You actually make it appear really easy with your presentation but I to
    find this topic to be really one thing which I believe I might by no means understand.
    It kind of feels too complicated and extremely broad for me.

    I’m taking a look ahead on your next publish, I’ll
    attempt to get the dangle of it!

  26. I absolutely love your blog and find a lot of your post’s to be what precisely I’m looking for. Would you offer guest writers to write content to suit your needs? I wouldn’t mind writing a post or elaborating on a lot of the subjects you write with regards to here. Again, awesome website!

  27. Hey! I just wanted to ask if you ever have any trouble with hackers?
    My last blog (wordpress) was hacked and I ended
    up losing many months of hard work due to no back up.
    Do you have any solutions to stop hackers?

  28. obviously like your web site but you need to test the spelling on quite a few of your
    posts. Several of them are rife with spelling issues and I
    in finding it very bothersome to inform the truth however I’ll
    certainly come again again.

  29. I’m impressed, I have to admit. Rarely do I come across a blog that’s equally educative and entertaining, and without a doubt, you’ve hit the nail on the head. The problem is something which too few folks are speaking intelligently about. Now i’m very happy that I found this during my hunt for something concerning this.

  30. An interesting discussion is worth comment. I believe that you should publish more on this issue, it may not be a taboo matter but usually folks don’t talk about such issues. To the next! All the best!!

  31. A person necessarily lend a hand to make critically articles I might state. This is the very first time I frequented your website page and up to now? I amazed with the research you made to make this actual publish extraordinary. Wonderful job!

  32. Most of whatever you point out is supprisingly legitimate and it makes me wonder why I had not looked at this with this light previously. This particular piece really did turn the light on for me as far as this particular issue goes. Nevertheless there is 1 issue I am not really too comfy with and whilst I attempt to reconcile that with the main theme of your issue, permit me observe exactly what all the rest of your visitors have to point out.Nicely done.

  33. I blog frequently and I seriously appreciate your content. This article has truly peaked my interest. I’m going to book mark your blog and keep checking for new details about once per week. I subscribed to your RSS feed too.

  34. I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored material stylish. nonetheless, you command get got an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike.

  35. I was suggested this website by way of my cousin. I’m now not sure whether this submit is written by way of him as no one else recognize such unique approximately my trouble. You’re wonderful! Thanks!

  36. Hi there! I know this is kind of off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having trouble finding one? Thanks a lot!

  37. First off I want to say superb blog! I had a
    quick question which I’d like to ask if you don’t mind. I was interested to find out how you center yourself and clear your head before writing.

    I have had a hard time clearing my thoughts in getting my thoughts out.
    I do enjoy writing but it just seems like the first 10 to 15 minutes tend to
    be wasted just trying to figure out how to begin. Any
    recommendations or tips? Thanks!

  38. In the awesome pattern of things you’ll receive an A with regard to effort and hard work. Where exactly you actually misplaced me was in all the facts. You know, they say, details make or break the argument.. And it couldn’t be much more true here. Having said that, let me inform you what did work. The article (parts of it) is definitely quite engaging and that is possibly why I am taking an effort to comment. I do not make it a regular habit of doing that. Second, despite the fact that I can notice the jumps in reasoning you come up with, I am not necessarily confident of just how you seem to connect the ideas that help to make the conclusion. For right now I shall yield to your point however wish in the foreseeable future you connect the facts much better.

  39. An attention-grabbing discussion is value comment. I believe that it is best to write extra on this subject, it might not be a taboo subject but usually individuals are not sufficient to talk on such topics. To the next. Cheers

  40. Greetings from Idaho! I’m bored at work so I
    decided to browse your blog on my iphone during lunch break.
    I enjoy the information you present here and can’t wait to take a look when I get home.
    I’m amazed at how quick your blog loaded on my cell phone ..
    I’m not even using WIFI, just 3G .. Anyways, wonderful blog!

  41. Hi there! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog post or vice-versa? My website discusses a lot of the same topics as yours and I feel we could greatly benefit from each other. If you are interested feel free to send me an email. I look forward to hearing from you! Terrific blog by the way!

  42. I do agree with all the ideas you’ve presented in your post. They’re very convincing and will certainly work. Still, the posts are very short for novices. Could you please extend them a bit from next time? Thanks for the post.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15,000FansLike
5,000FollowersFollow
536FollowersFollow
- Advertisment -spot_img

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Most Popular