πββοΈHello Friends!
π¨βπ»So I tried building QR code Generator from input link with simple API And added the feature to Download That QR Code & Yeahπ₯΅ faced a lot of bugs dealing with two different APIs but finally Made itπ€©
Let me show you how simple it is!π
(full code below the article)
πStep 1
π We will need an input to paste our URL and a button to do work with that input
<input type="text" id="input"/>
<button onclick="generate()">Generate</button>
πwe added generate function that will trigger JavaScript
π€ΎββοΈBut we need to show out output so we will create an an image
πStep 2
\\create image element
let img = document.createElement("img");
\\select the div from html
let qr = document.querySelector(".qr-code");
\\ stick the generated image to html div
qr.appendChild(img);
πOkay so now π
Input and button - Ready β
div to get output - Ready β
πStep 3
πThe Third and main step is to add JavaScript code to generate QR
π¦Let get the input value from input tab
function generate(){
let input = document.getElementById("input");
}
πNext we will check if the value is inserted or not before clicking the generate button π―
The code will only run if there is value in input π
if yes!π€©
then we will search the qr img by API:π€
πwe will use template literal to Pass Value of input that we got
https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${input.value}
πAnd Boomπ₯ The API will do its workπ
if(input.value){
img.src = `https://api.qrserver.com/v1/
create-qr-code/?size=180x180&data=${input.value}`
};
Now Let's Download Our QR π
πTo download our image we will use Another API FileSaver.js
πStep 1
πAdding the Cdn in Head of Html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
πNow Lets Create Download Button :π¨
<button id="mybutton" >Download</button>
Andπ
//get the html button
let btnDownload = document.querySelector('#mybutton');
//get the html image
let imgdwn = document.querySelector('img');
πStep 2
πNow Add a Event Listener that work when we click download button
So when we click it:π§
-π first get the img src and set in imagePath β
btnDownload.addEventListener('click', () => {
//getting the src of image
let imagePath = imgdwn.getAttribute('src');
});
-π¦second get the img name from the urlβ
eg : https://httpbin.org/image get the >>image and add + '.jpg' at end
btnDownload.addEventListener('click', () => {
//getting the src of image
let imagePath = imgdwn.getAttribute('src');
//image format
let fileName = getFileName(imagePath);
//eg :saveAs("https://httpbin.org/image", "image.jpg");
saveAs(imagePath, fileName);
});
π§so it will be image.jpg from the url to do that we will create getFileName(imagePath)
Function
πafter getting the name of image (eg: image.jpg) from function
we will pass into saveAs(imagePath, fileName)
; π
function getFileName(str) {
//search '=' from url starting from end and give the output
let gotstr = str.substring(str.lastIndexOf('=') + 1 );
let format = ".jpg";
// return the format ie image.jpg
return gotstr.concat(format);
}
Congratulationπβ¨
You Successfullyπ Created a QR code Generator π and with Download Buttonπ
Full Code Below π
*π HTML π *
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input" placeholder="Enter
Url" autocomplete="off"/>
<button onclick="generate()">Generate</button>
</div>
<div class="qr-code"></div>
<button id="maindwnbtn" ><a href="#" id="mybutton"
download="qr">Download</a></button>
</div>
<a href="linktr.ee/developedbyjk">@developedbyjk</a>
</body>
</html>
*π CSS - if you want π π *
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
body{
font-family: 'Space Mono', monospace;
background-color: aliceblue;
}
.container{
max-width: 400px;
margin: 10%;
max-height: 500px;
padding: .2rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color:aliceblue;
}
.input-container{
display: flex;
flex-direction: column;
}
.input-container input{
padding: 12px;
outline: none;
border-radius: 5px;
border: 2px dashed #c7c7c7;
font-family: 'Space Mono', monospace;
}
.qr-code{
margin-top: 100px;
height: 200px;
width: 200px;
border: 2px dashed #c7c7c7;
}
.input-container button{
padding: 0.5rem;
height: 40px;
color: #fff;
font-size: 1rem;
margin-top: .5rem;
outline: none;
border-radius: 90px;
border: none;
background-color: #332fd0;
cursor: pointer;
font-family: 'Space Mono', monospace;
}
#maindwnbtn{
padding: 0.5rem;
height: 40px;
font-size: 1rem;
margin-top: 80%;
outline: none;
border-radius: 90px;
border: none;
background-color: #332fd0;
cursor: pointer;
}
#maindwnbtn a{
color: #fff;
text-decoration:none;
font-family: 'Space Mono', monospace;
}
.qr-code{
width: 100%;
height: 180px;
text-align: center;
}
*π JavaScript π *
let img = document.createElement("img");
let qr = document.querySelector(".qr-code");
qr.appendChild(img);
function generate(){
let input = document.getElementById("input");
if(input.value){
input.style.borderColor = "#c7c7c7";
img.src = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${input.value}`;
}
else{
input.style.borderColor="red";
return false;
}
input.value = "";
}
let btnDownload = document.querySelector('#mybutton');
let imgdwn = document.querySelector('img');
btnDownload.addEventListener('click', () => {
let imagePath = imgdwn.getAttribute('src');
let fileName = getFileName(imagePath);
saveAs(imagePath, fileName);
});
function getFileName(str) {
let gotstr = str.substring(str.lastIndexOf('=') + 1 );
let format = ".jpg";
return gotstr.concat(format);
}
Wait π³
You reached so Below π€― I can't Believe it
You seem great Diver ππ
So Hiπ My diver Friendπ¨
Myself JK π¨βπ»
I share Stuff Related to Web Design & Development
If you like thisπ
I'm Sure you'll Love My Instagram Page Where I share the same,but with Visual Taste.π€ππ
Hope we meet Thereπππ
Happy Coding πͺβ¨π
My All Links linktr.ee/developedbyjk
Top comments (0)