<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
.qr-code {
max-width: 200px;
margin: 10px;
}
</
style
>
<
title
>QR Code Generator</
title
>
</
head
>
<
body
>
<
div
class
=
"container-fluid"
>
<
div
class
=
"text-center"
>
<
img
src
=
class
=
"qr-code img-thumbnail img-responsive"
/>
</
div
>
<
div
class
=
"form-horizontal"
>
<
div
class
=
"form-group"
>
<
label
class
=
"control-label col-sm-2"
for
=
"content"
>
Content:
</
label
>
<
div
class
=
"col-sm-10"
>
<
input
type
=
"text"
size
=
"60"
maxlength
=
"60"
class
=
"form-control"
id
=
"content"
placeholder
=
"Enter content"
/>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
div
class
=
"col-sm-offset-2 col-sm-10"
>
<
button
type
=
"button"
class
=
"btn btn-default"
id
=
"generate"
>
Generate
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
</
script
>
<
script
>
// Function to HTML encode the text
// This creates a new hidden element,
// inserts the given text into it
// and outputs it out as HTML
function htmlEncode(value) {
return $('<
div
/>').text(value)
.html();
}
$(function () {
// Specify an onclick function
// for the generate button
$('#generate').click(function () {
// Generate the link that would be
// used to generate the QR Code
// with the given data
let finalURL =
htmlEncode($('#content').val()) +
'&chs=160x160&chld=L|0'
// Replace the src of the image with
// the QR code image
$('.qr-code').attr('src', finalURL);
});
});
</
script
>
</
body
>
</
html
>