JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<header>
		<img src="http://www.fiegl-ischgl.at/qr/logo.png" alt="Fiegl + Spielberger">
</header>
<main>
  <section id="code">
    <label>
      <span>RKSV-Sequenz eingeben:</span>
      <input id="tbSignatureText" type="text" style="text-align:center;"/>
    </label>
    <button type="button" id="btnSignatureTextOk">OK</button>
  </section>
  <section id="qr">
    <label>
      <span>Signatur einfügen und Tab drücken</span>
      <input id="text" type="text" style="text-align:center; width:80%;"
             onchange='generateBarCode();' /> 
    </label>
    <img id='barcode' alt=''
         src='https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=200x200'/>
  </section>
</main>
<footer>Made as a Sample for Selfhtml</footer>

CSS

header, footer {
  padding: 1em;
  text-align: center;
}

main {
  text-align: center;
}

section {
  padding: 1em;
  line-height: 2.5em;
}

label {
  display: block;
}

label span {
  display: block;
}

input[type=text] {
  width: 80%;
}

#qr img {
  margin-top: 1em;
}

JavaScript

function b64_to_utf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
}
function decodeBase64Url(input) {
   input = input.replace(/-/g, '+').replace(/_/g, '/');
   switch (input.length % 4)
   {
   case 0: return input;
   case 2: return input + "==";
   case 3: return input + "=";
   case 1:
      throw new Error('InvalidLengthError: Input base64url string is the wrong length for base64 encoding');
   }
}
function generateBarCode()
{
   var nric = $('#text').val();
   var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' +
             encodeURIComponent(nric) + '&size=200x200';
   $('#barcode').attr('src', url);
}
$(function() {
    $('#btnSignatureTextOk').click(function() {
       var inputText = $('#tbSignatureText').val();
       var parts = inputText.split('.');
       var part1 = b64_to_utf8(parts[1]);
       var part2 = decodeBase64Url(parts[2]);
       var result = part1 + '_' + part2;
       $("#text").val(result);
       generateBarCode();
   });
   $('#text').change(generateBarCode);
});