Hi Developers ,
Lets see How To Generate QR Code Using Javascript. To create QR Code using javascript we are using the third party API for creating the QR Code.
The QR Code is generated based on the text given in the input field when the text is given in the input field . It collects the value from the input field and send API request along with the data.
And then recieves the response data from the API and the stores the data in the image tag to display the QR Code .
Send a GET request of following form to our system to get a QR code graphic as PNG image (=to generate a QR code):
http(s)://api.qrserver.com/v1/create-qr-code/?data=[URL-encoded-text]&size=[pixels]x[pixels]
create-qr-code is command and data = pass text as per requirement, size = 100*100 for example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How To Generate QR Code Using Javascript - ItSolutionsGuides</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style type="text/css" media="screen">
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Quicksand;
}
body {
width: 100%;
height: 100vh;
background:linear-gradient(to right top,#b597f6,#439cfb);
display: flex;
justify-content: center;
align-items: center;
}
.main {
width: 50%;
height: 70%;
padding: 50px 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #fff;
box-shadow: 0 10px 25px -10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.main p {
font-size:36px;
margin:10px;
}
.main .input {
width: 90%;
padding: 10px 25px;
border: 3px solid #9e9e9e;
outline: none;
margin: 15px 0 40px;
}
.main .input:focus {
border: 3px solid #439cfb;
}
.btn ,.input {
font-size:1.1rem;
border-radius: 5px;
}
.main .btn {
width: 90%;
padding: 12px 0;
outline: none;
border:none;
border-radius: 5px;
background: #439cfb;
color: #fff;
transition: 0.3s;
margin: 0 0 25px 0;
}
.main .code {
margin: 25px 0;
}
.main .btn:hover {
box-shadow: 0 10px 25px -10px #439cfb;
}
.main #note {
font-size: 1.2rem;
font-family: 'Courier New', Courier, monospace;
}
#toast {
position: absolute;
bottom: 0;
border-radius: 5px;
padding: 15px 50px;
background: #07f49e;
opacity: 0;
visibility: hidden;
box-shadow: 0 10px 25px -10px #07f49e;
transition: 0.3s;
}
#toast.show {
visibility: visible;
opacity: 1;
bottom: 50px;
}
</style>
<body>
<div class="main">
<p>How To Generate QR Code Using Javascript - ItSolutionsGuides</p>
<input type="text" class="input" value="" id="textvalue">
<button class="btn">Generate</button>
<img src="images/default.png" alt="Your QR Code will be show here..." class="code">
<p id="note">Tutorial by ItSolutionsGuides</p>
</div>
<div id="toast">Successfully Generated</div>
<script>
var btn = document.querySelector('.btn');
var code = document.querySelector('.code');
var toast = document.querySelector('#toast');
btn.addEventListener("click",generate);
function generate() {
var data = $('#textvalue').val();
var url = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${data}`;
code.src = url;
toastDiv();
}
function toastDiv() {
toast.className = "show";
setTimeout( function() {
toast.className = toast.className.replace("show" , "");
},2000);
}
</script>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides