\$\begingroup\$
\$\endgroup\$
1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QR code generator</title>
<style>
body { font-family: arial, sans-serif; }
section {
margin: 50px auto;
max-width: 350px;
text-align: center;
}
textarea {
width: 100%;
height: 50px;
margin-bottom: 10px;
}
#size { max-width: 64px; }
</style>
</head>
<body>
<section>
<h1>QR code generator</h1>
<p>Enter an URL or some text bellow and hit the Generate button (<kbd>Ctrl</kbd>+<kbd>Enter</kbd>)!</p>
<textarea id="textarea" autofocus></textarea>
<label for="size">Size (px):</label>
<input id="size" type="number" value="150" min="50" max="500" step="50">
<button onclick="genQRcode()">Generate</button>
<div id="content" style="display: none;">
<p><img id="qrcode" src="" /></p>
<label for="qrcode-url">QR Code URL:</label>
<input id="qrcode-url" type="text" onclick="this.select()">
</div>
</section>
<script>
var textarea = document.getElementById("textarea"),
content = document.getElementById("content");
function genQRcode() {
var data = encodeURIComponent(textarea.value),
size = document.getElementById("size").value,
chart = "http://chart.googleapis.com/chart?cht=qr&chs=" + size + "x" + size + "&choe=UTF-8&chld=L|0&chl=" + data;
if (data === "") {
alert("Please enter a valid data!");
textarea.focus();
content.style.display = "none";
} else {
content.style.display = "";
document.getElementById("qrcode").src = chart;
document.getElementById("qrcode-url").value = chart;
}
}
document.addEventListener("keydown", function(e) {
if (e.ctrlKey && e.keyCode == 13) {
genQRcode();
}
});
</script>
</body>
</html>
konijn
34.2k5 gold badges70 silver badges267 bronze badges
-
\$\begingroup\$ Minor nit: "bellow" => "below". ;-) \$\endgroup\$Jon Ericson– Jon Ericson2013年10月31日 17:17:05 +00:00Commented Oct 31, 2013 at 17:17
1 Answer 1
\$\begingroup\$
\$\endgroup\$
3
This code looks fine to me.
If you are interested in nitpicking then :
- Style information should be in a css file
- JavaScript should be in a js file
- Your image tag should have an alt
- It should show some indication that you are leveraging a Google API ?
- Assigning events like this
<button onclick="genQRcode()">is obsolete Please enter a valid datais not proper English ( "Please enter valid data" )- You should consider adding the listener to the textarea, not the document
answered Oct 31, 2013 at 13:43
-
\$\begingroup\$ Hi thanks for the answer. But why "Please enter a valid data" isn't proper English. can you correct this? *English isn't my primary language... \$\endgroup\$udd– udd2013年10月31日 13:49:58 +00:00Commented Oct 31, 2013 at 13:49
-
1\$\begingroup\$ @udd: In English, "data" is plural. (Well more or less.) It would probably be better to say what sort of data (URL, free text, etc.) you plan to encode. Also, you don't really validate the data beyond making sure it's not a zero-length string, so "valid" is a touch misleading. (But this is all on the nitpicking level. Well done.) \$\endgroup\$Jon Ericson– Jon Ericson2013年10月31日 17:16:18 +00:00Commented Oct 31, 2013 at 17:16
-
\$\begingroup\$ @JonEricson, it would be more precise to say that data is either plural or uncountable. In modern usage it seems to be uncountable more often than plural. \$\endgroup\$Peter Taylor– Peter Taylor2013年11月01日 11:12:09 +00:00Commented Nov 1, 2013 at 11:12
default