JSFiddle - React, Tailwind, and code Playground

by leggetter

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form>
      
    <label for="url">Url</label>
    <input type="text" name="url" />
      
    <label>Dimensions (Width x Height)</label>
    <input type="number" name="width" value="100" />
    x
    <input type="number" name="height" value="100" />
      
    <label for="redirect_url">Redirect</label>
    <input type="text" name="redirect_url" readonly="readonly" />
      
    <label>QR Code</label>
    <img src="" />
  </form>
</body>
</html>

CSS

label {
      float: left;
      clear: left;
      text-align: right;
      width: 100px;
      margin-right: 10px;
    }
    input[type=text], img {
      float: left;
      clear: right;
    }
    input[type=text] {
      width: 400px;
    }

JavaScript

// handy decode tester:
// http://zxing.org/w/decode.jspx

var libs = {
    window: window,
    jQuery: jQuery
};
var config = {
    url: 'form input[name=url]',
    redirect: 'form input[name=redirect_url]',
    qrImage: 'form img',
    qrWidth: 'form input[name=width]',
    qrHeight: 'form input[name=height]',    
    redirectServicePrefix: 'http://some-redirect-url.com/?url=',
    redirectServiceQrPrefix: 'http://some-redirect-url.com/?src=qr&url=',
    qrService: new GoogleQRService()
};

function GoogleQRService() {
    this.qrServiceRoot = 'https://chart.googleapis.com/chart?cht=qr&';
}
GoogleQRService.prototype.getQRCode = function( data, width, height ) {
    var imageUrl = this.qrServiceRoot + 'chs=' + width + 'x' + height + '&chl=' + encodeURIComponent( data );
    return imageUrl;
};

(function(libs, config) {

    var $ = libs['jQuery'];
    var window = libs['window'];

    var url = $(config.url);
    var redirect = $(config.redirect);

    url.keyup(urlChange);

    function urlChange() {
        
        var toRedirect = $.trim($(this).val());
        if (!toRedirect) {
            // TODO: show error?
        }
        else {
            var toRedirectEncoded = encodeURIComponent( toRedirect );
            var redirectUrl = config.redirectServicePrefix + toRedirectEncoded;
            
            $( config.redirect ).val( redirectUrl );
            
            var width = $( config.qrWidth ).val();
            var height = $( config.qrHeight ).val();
            
            var qrRedirectUrl = config.redirectServiceQrPrefix + toRedirectEncoded;
            
            var qrImageUrl = config.qrService.getQRCode( qrRedirectUrl, width, height );
            console.log( 'qrImageUrl: ' + qrImageUrl );
            $( config.qrImage ).attr( 'src' , qrImageUrl );
        }
    }

})(libs, config);