Creating Simple jQuery QR Code Generator

I've created simple qr code generator using jquery and google infographics (deprecated) chart API. This time I'd like to share this simple and easy trick.

The Demo

Image Result

Download Source Code

HTML Elements

The element to show Qr Code image after jquery event. Below is the example:

<div id="outwrap">

      <div class="left" style="width:490px">
          <textarea id="qrc" style="width:490px;height:220px"></textarea>
          <button id="buildqr">Create</button>
          <span id="qrerror" class="error"></span>
      </div>
      <div class="right" class="tbl" style="width:250px"><div class="tbl-cell" id="qresult">Image Result</div></div>
      <div class="clear"></div>

</div>

Javascript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
$(function(){
   $('#buildqr').click(function(){
      var qrc = $('#qrc').val(),
          qrd = encodeURIComponent(qrc),
          gCh = 'https://chart.googleapis.com/chart?chs=250x250&cht=qr&choe=UTF-8&chld=Q|1&chl='+qrd;
      if(qrc == '') {
         $('#qrerror').html('Please write some text');
         return false;
      }
      $('#qresult').html('<img class="box-shadow" src="'+gCh+'" width="250" height="250" />');
   });
});
</script>

CSS

#qresult {
  margin: auto;
  width:250px;
  height:250px;
  border:1px #ccc solid;
}
.box-shadow {
  box-shadow:0 0 5px #555;
}
.left{float:left}
.right{float:right}
.clear{clear:both}
.error{color:#ff0000}
.tbl,.tbl-cell {
  text-align:center;
  vertical-align:middle;
}
.tbl {display:table}
.tbl-cell {display:table-cell}