This HTML and JavaScript source code enables developers to create a QR code generator for various purposes. The code includes a user input section where users can enter text, and upon clicking the “Generate” button, a corresponding QR code will be displayed. The QR code is generated using the qrcode.js library, which dynamically creates the QR code based on the user input.
The generated QR code is also provided with a download option, allowing users to save the QR code as an image (qr_code.png). This code is helpful for developers who want to quickly integrate a QR code generator into their web projects, enabling users to generate QR codes for any information they input.
How to Create a QR Code Generator in Your Web/App Project
1. First of all, load the qrcode.js and Google fonts CSS by adding the following CDN links into the head tag of your web/app project.
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap'>
2. Create the HTML structure for the QR code generator as follows:
<div class="user-input-section">
<section class="heading">
<div class="title">QRcodes</div>
<div class="sub-title">Generate QRCode for anything!</div>
</section>
<section class="user-input">
<input type="text" placeholder="Type something..." name="input_text" id="input_text" autocomplete="off">
<button class="button" type="submit">Generate<i class="fa-solid fa-rotate"></i></button>
</section>
</div>
<div class="qr-code-container">
<div class="qr-code" style></div>
</div>
3. Use the following CSS styles to design the basic interface of the QR generator app.
: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;
align-items: center;
justify-content: center;
background: #2b303a !important;
min-height: 720px;
}
@media screen and (max-width: 50em) {
body {
flex-direction: column;
height: 100%;
}
}
body .heading {
margin: 3rem 0 5rem 0;
}
body .title,
body .sub-title {
font-size: 4rem;
text-align: center;
font-family: "Poppins", sans-serif;
color: #12130f;
color: #eee5e9;
}
body .sub-title {
font-size: 1.5rem;
color: #eee5e9;
opacity: 0.5;
}
body .user-input-section {
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
}
@media screen and (max-width: 50em) {
body .user-input-section {
width: 100%;
margin: 2rem 0 0 0;
}
}
body .user-input-section .user-input {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
body .user-input-section .user-input label {
text-align: center;
font-size: 1.5rem;
font-family: "Poppins", sans-serif;
}
body .user-input-section .user-input input {
width: 80%;
max-width: 35rem;
font-family: "Poppins", sans-serif;
outline: none;
border: none;
border-radius: 0.5rem;
background-color: #9b8774ad;
background-color: #7c7c7c;
text-align: center;
padding: 1.5rem 1rem;
margin: 1rem 1rem 2rem 1rem;
color: black;
}
body .user-input-section .user-input input::placeholder {
color: #eee5e9;
color: #2b303a;
}
body .button {
outline: none;
border: none;
border-radius: 0.5rem;
padding: 1.5rem 2.5rem;
margin-bottom: 3rem;
background-color: #5b92799d;
background-color: #92dce5;
color: black;
font-family: "Nunito", sans-serif;
font-size: 1.6rem;
}
body .button i {
margin-left: 1rem;
}
body .qr-code-container {
display: flex;
justify-content: center;
align-items: center;
width: 40%;
}
@media screen and (max-width: 50em) {
body .qr-code-container {
width: 100%;
margin: 8rem 0;
}
}
body .qr-code-container .qr-code {
display: flex;
border-radius: 1rem;
background-color: #7c7c7c33;
width: fit-content;
flex-direction: column;
justify-content: space-between;
padding: 2rem;
}
body .qr-code-container .qr-code button {
display: flex;
justify-content: center;
background-color: #1f1f1f;
color: #eae6e5;
border: none;
outline: none;
width: 100%;
margin-top: 2.5rem;
border-radius: 1rem;
}
body .qr-code-container .qr-code button a {
font-family: "Poppins", sans-serif;
font-size: 1.5rem;
width: 100%;
height: 100%;
text-decoration: none;
color: #eae6e5;
padding: 1rem;
}
body .qr-code-container .qr-code button a i {
margin-left: 0.5rem;
}
4. Finally, add the following JavaScript function between the <script> and </script> tags just before closing the body tag.
let btn = document.querySelector(".button");
let qr_code_element = document.querySelector(".qr-code");
btn.addEventListener("click", () => {
let user_input = document.querySelector("#input_text");
if (user_input.value != "") {
if (qr_code_element.childElementCount == 0) {
generate(user_input);
} else {
qr_code_element.innerHTML = "";
generate(user_input);
}
} else {
console.log("not valid input");
qr_code_element.style = "display: none";
}
});
function generate(user_input) {
qr_code_element.style = "";
var qrcode = new QRCode(qr_code_element, {
text: `${user_input.value}`,
width: 180, //128
height: 180,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
let download = document.createElement("button");
qr_code_element.appendChild(download);
let download_link = document.createElement("a");
download_link.setAttribute("download", "qr_code.png");
download_link.innerHTML = `Download <i class="fa-solid fa-download"></i>`;
download.appendChild(download_link);
let qr_code_img = document.querySelector(".qr-code img");
let qr_code_canvas = document.querySelector("canvas");
if (qr_code_img.getAttribute("src") == null) {
setTimeout(() => {
download_link.setAttribute("href", `${qr_code_canvas.toDataURL()}`);
}, 300);
} else {
setTimeout(() => {
download_link.setAttribute("href", `${qr_code_img.getAttribute("src")}`);
}, 300);
}
}
generate({
value: "https://murtuzaalisurti.github.io/qr"
});
That’s all! hopefully, you have successfully created QR Code Generator using this HTML, CSS, and JS source code. If you have any questions or suggestions, feel free to comment below.
