Free javascript Hosting


certificate.js

Uploaded on Nov 28 2021 19:02 by eren.j.shark.io

import {ts,tm,th} from "./timer.js";
import {subTitle} from "./qobj.js";
const {jsPDF}=window.jspdf
// taken time
let taken_time=''

// date
let date=new Date().getDate()
let month=new Date().getMonth()+1
let year=new Date().getFullYear()
let certified_date=`${date}/${month}/${year}`

// certificate ID
let qktID=1001
export class GetCertificate{
static render(tq,aq,percentage){
if(ts!=0){
taken_time=`${ts} Sec.`
}
if(tm!=0){
taken_time=`${tm} Min.`
}
if(th!=0 & tm!=0){
taken_time=`${th} Hour ${tm} Min.`
}
// student Name
const stuName=document.querySelector(".user_wr input").value
console.log(stuName);
// jpg from dom
let img=document.getElementById("cert-img")
const canva=document.getElementById("certificate-canva")
canva.width=img.width
canva.height=img.height

let context=canva.getContext("2d")
// bg img
context.drawImage(img,0,0,canva.width,canva.height)
// controls
let mid=canva.width/2
let mid1=(canva.width/2)+90
let mid2=(canva.height/2)
// ----
// name
context.font="bold 60px Arial"
context.fillStyle="green"
context.textAlign="center"
context.fillText(stuName,mid+90,mid1-100)

context.font="bold 60px Arial"
context.fillStyle="blue"
context.textAlign="center"
// title
context.fillText(subTitle,mid,590)

// --
context.font="bold 60px Arial"
context.fillStyle="purple"
context.textAlign="left"
// scored

context.fillText(`${aq}/${tq}`,mid1,mid2+182)

// percentage
context.fillText(`${percentage}%`,mid1,mid2+245)

// time taken
context.fillText(taken_time,mid1,mid2+312)

// certificate ID
context.fillText(`QKT-${qktID}`,mid1,mid2+375)

// certified On
context.fillText(certified_date,mid1,mid2+435)
}
}

// download image
function download_image(){
const canva=document.getElementById("certificate-canva")
let a=document.createElement('a')
let image=canva.toDataURL("image/png")
a.href=image
a.download="certificate.png"
a.click()
}
// download image
function download_pdf(){
const canva=document.getElementById("certificate-canva")
let image=canva.toDataURL("image/png")
let pdf=new jsPDF()
let pdfH=pdf.internal.pageSize.getHeight()
let pdfW=pdf.internal.pageSize.getWidth()
pdf.addImage(image,"png",0,0,pdfW,pdfH)
pdf.save("certificate.pdf")
}
// download btn dom
const img_dnld=document.querySelector("#img-dnld")
const pdf_dnld=document.querySelector("#pdf-dnld")

const container2=document.querySelector(".container__main1")
const container3=document.querySelector(".cert_container")
const close=document.querySelector(".close")
console.log("works well");
// dwnld btn click
img_dnld.addEventListener("click",()=>{
download_image()
})
pdf_dnld.addEventListener("click",()=>{
download_pdf()
})
const get_cert=document.querySelector(".get_cert")
get_cert.addEventListener("click",()=>{
container2.style.display="none"
container3.style.display="flex"
})
close.addEventListener("click",()=>{
container3.style.display="none"
container2.style.display="block"
})

Back to list