<!DOCTYPE html>
<meta charset="utf-8">
<title>QR code generator</title>
  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; }
  <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()">
  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!");
      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) {
  • \$\begingroup\$ Minor nit: "bellow" => "below". ;-) \$\endgroup\$ – Jon Ericson Oct 31 '13 at 17:17

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 data is not proper English ( "Please enter valid data" )
  • You should consider adding the listener to the textarea, not the document
  • \$\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 Oct 31 '13 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 Oct 31 '13 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 Nov 1 '13 at 11:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.