 |
| Qr-code-generator Code Download |
Hello Developer’s In this post, we will create a qr code generator from
scratch the using of html, css, and javascript. so i will count on you’ve got
fundamental expertise of html, css, and javascript, that is, you ought to
understand the primary html tags and the way to link the css and javascript
files to html files.
Using HTML to create qr Code generator from scratch let’s write HTML Code use
this method
HTML CODE HERE
<!DOCTYPE html>
<html lang="en" >
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="main-qu">
<div class="owner"><h1>Insidecode.org</h1></div>
<div class="qr-code-generator">
<input type="text" class="qr-url" placeholder="URL or Text">
<input type="number" class="qr-size" value="128" min="20" max="500">
<button class="generate-qr-code">Generate</button>
</div>
</div>
<br>
<div id="qrcode"></div>
<!-- JavaScript -->
<script src="./script.js"></script>
</body>
</html>
CSS CODE HERE
.main-qu{
display: flex;
flex-direction: column;
margin-block: 5%;
background-image: linear-gradient( 180deg, rgba(155,254,23,1) 45.5%, rgba(36,243,8,1) 97.9% );
padding: 30px;
box-shadow: 2px 2px 10px 5px rgb(128, 124, 124);
border: 1px solid rgb(162, 0, 255);
border-radius: 10px 0 10px 0;
}
.main-qu .owner h1{
display: flex;
position: relative;
text-align: center;
flex-direction: column;
margin: auto;
padding-bottom: 10px;
font-size: 18px;
font-family: sans-serif;
}
.qr-code-generator {
width: 500px;
margin: 0 auto;
}
.qr-code-generator * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#qrcode {
width: 128px;
height: 128px;
margin: 0 auto;
text-align: center;
}
#qrcode a {
font-size: 0.8em;
}
.qr-url, .qr-size {
padding: 0.5em;
border: 1px solid rgb(24, 24, 24);
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.qr-url {
width: 79%;
}
.qr-size {
width: 20%;
}
.generate-qr-code {
display: block;
width: 100%;
margin: 10px 0 0;
padding: 0.25em;
font-size: 1.2em;
border: none;
cursor: pointer;
background-image: radial-gradient( circle 972.6px at 10% 20%, rgba(243,0,75,1) 0%, rgba(255,93,75,1) 90% );
color: #fff;
}
JAVASCRIPT CODE HERE
$('.generate-qr-code').on('click', function(){
// Clear Previous QR Code
$('#qrcode').empty();
// Set Size to Match User Input
$('#qrcode').css({
'width' : $('.qr-size').val(),
'height' : $('.qr-size').val()
})
// Generate and Output QR Code
$('#qrcode').qrcode({width: $('.qr-size').val(),height: $('.qr-size').val(),text: $('.qr-url').val()});
});
Notes:
To get the password to download the code on Telegram
join
Download Codes
BihariGraphic:
Join our Telegram Channel and Discussion Group to get Daily Update’s and Idea’s