HTML code of Bulk QR Code Generator

HTML code of Bulk QR Code Generator | QR Code Generator

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>QR Code Generator</title>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
</head>
<body>
<div class=”container”>
<h3>QR Code Generator</h3>
<div class=”row”>
<div class=”input-field col s12″>
<input id=”text-input” type=”text”>
<label for=”text-input”>Text to Encode</label>
</div>
</div>
<div class=”row”>
<div class=”col s12″>
<button id=”generate-btn” class=”btn waves-effect waves-light” type=”button”>
Generate QR Code
<i class=”material-icons right”>qr_code</i>
</button>
</div>
</div>
<div class=”row”>
<div class=”col s12″ id=”qrcode-container”></div>
</div>
</div>

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
<script src=”https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js”></script>
<script src=”app.js”></script>
</body>
</html>

 

Java Script code:

$(document).ready(function(){
$(‘#generate-btn’).click(function(){
var text = $(‘#text-input’).val();
if(text.trim() !== ”) {
$(‘#qrcode-container’).empty();
new QRCode(document.getElementById(‘qrcode-container’), text);
} else {
Materialize.toast(‘Please enter text to generate QR code.’, 3000);
}
});
});

Leave a Comment

Exit mobile version