QR code generator javascript | easy way to create qr code using html css javascript

QR code generator javascript | easy way to create QR code using html css javascript

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a QR code generator javascript. We use HTML, Css, and javascript for this QR code generator javascript. Hope you enjoy our blog so let’s start with a basic HTML structure for a QR code generator javascript.

HTML code

 <body>  
<section class="heading">
<div class="title">QRcodes</div>
<div class="sub-title">Generate QRCode for anything!</div>
</section>
<section class="user-input">
<label for="input_text">Type something...</label>
<input type="text" name="input_text" id="input_text" autocomplete="off">
<button class="button" type="submit">Generate QR Code</button>
</section>
<div class="qr-code" style="display: none;"></div>
</body>

There is all HTML code for the QR code generator javascript. Now, you can see output without CSS, then we write css & javascript for QR code generator javascript.

 :root {  
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-size-adjust: none;
-webkit-text-size-adjust: none;
}
button:hover {
cursor: pointer;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #eae6e5;
}
.heading {
margin: 3rem 0 5rem 0;
}
.title, .sub-title {
font-size: 4rem;
text-align: center;
font-family: "Poppins", sans-serif;
color: #12130f;
}
.sub-title {
font-size: 1.5rem;
color: #8f8073;
}
.user-input {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.user-input label {
text-align: center;
font-size: 1.5rem;
font-family: "Poppins", sans-serif;
}
.user-input input {
width: 80%;
max-width: 35rem;
font-family: "Poppins", sans-serif;
outline: none;
border: none;
border-radius: 0.5rem;
background-color: #9b8774 ad;
text-align: center;
padding: 0.7rem 1rem;
margin: 1rem 1rem 2rem 1rem;
}
.button {
outline: none;
border: none;
border-radius: 0.5rem;
padding: 0.7rem 1rem;
margin-bottom: 3rem;
background-color: #5b9279 9d;
color: #12130f;
font-family: "Poppins", sans-serif;
}
.qr-code {
border-top: 0.5rem solid #8f8073;
border-right: 0.5rem solid #8f8073;
border-bottom: 1rem solid #8f8073;
border-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
border-left: 0.5rem solid #8f8073;
background-color: #8f8073;
}
.qr-code button {
display: flex;
justify-content: center;
background-color: #8f8073;
font-family: "Poppins", sans-serif;
color: #eae6e5;
border: none;
outline: none;
width: 100%;
height: 100%;
margin-top: 1rem;
}
.qr-code button a {
width: 100%;
height: 100%;
text-decoration: none;
color: #eae6e5;
}

Now we have completed our CSS section,  Here is our updated output CSS.

output

Javascript code 

use this link in javascript as a CDN link

 //https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js  
 let btn = document.querySelector(".button");  
btn.addEventListener("click", () => {
let user_input = document.querySelector("#input_text");
if (user_input.value != "") {
if (document.querySelector(".qr-code").childElementCount == 0) {
generate(user_input);
} else {
document.querySelector(".qr-code").innerHTML = "";
generate(user_input);
}
} else {
document.querySelector(".qr-code").style = "display: none";
console.log("not valid input");
}
});
function generate(user_input) {
document.querySelector(".qr-code").style = "";
var qrcode = new QRCode(document.querySelector(".qr-code"), {
text: `${user_input.value}`,
width: 180, //128
height: 180,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
console.log(qrcode);
let download = document.createElement("button");
document.querySelector(".qr-code").appendChild(download);
let download_link = document.createElement("a");
download_link.setAttribute("download", "qr_code_linq.png");
download_link.innerText = "Download";
download.appendChild(download_link);
if (document.querySelector(".qr-code img").getAttribute("src") == null) {
setTimeout(() => {
download_link.setAttribute(
"href",
`${document.querySelector("canvas").toDataURL()}`
);
}, 300);
} else {
setTimeout(() => {
download_link.setAttribute(
"href",
`${document.querySelector(".qr-code img").getAttribute("src")}`
);
}, 300);
}
}

Final output

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the QR code generator javascript. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a QR code generator javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Code by – Murtuza

This Post Has 0 Comments

Leave a Reply