Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<div style="width: 50%; margin: auto; text-align: center">
Enter a URL or String and hit Return <br> &nbsp;
<input id="text" type="text" value="" style="width:100%" />
</div>
<br>&nbsp;<br>&nbsp;<br>&nbsp;
<p style="text-align: center">Default is 256px Square in Black and White </p>
<div id="qrcode_1" style="width: 256px; margin: auto"></div>
<br>&nbsp;<br>&nbsp;<br>&nbsp;
<p style="text-align: center">Options allow for different colors and sizes</p>
<div id="qrcode_2" style="width: 128px; margin: auto"></div>
<script src="/javascripts/qrcode.min.js"></script>
<script type="text/javascript">
var qrcode_1;
var qrcode_2;
$(document).ready(function() {
$('#text').on('change', function(e){
e.preventDefault();
// clear the existing qr code images
$('#qrcode_1').html('');
$('#qrcode_2').html('');
var str = $(this).val();
// Simplest form - one line - default options - pass it the element and the string
qrcode_1 = new QRCode(document.getElementById("qrcode_1"), str);
// version with options, pass it the name of the element and a hash of options
qrcode_2 = new QRCode("qrcode_2", {
text: str,
width: 128,
height: 128,
colorDark : "#600000",
colorLight : "#ffffff"
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment