JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="generator-container">
  <div class="well">
    <div id="generator-code">Code placeholder</div>
    
    <div id="generator-load" class="hide-it">
      <span class="fa fa-fw fa-3x fa-spin fa-spinner"></span>
    </div>
  </div>
  
  <button type="button" class="btn btn-primary" id="generator-button">
    Generate New Code
  </button>
</div>

CSS

body {
  margin: 20px;
}

.generator-container {
  text-align: center;
}

#generator-code {
  font-size: 2em;
}

.hide-it {
  display: none;
}

JavaScript

// Code Generator
function codeGen(a){for(var t="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",e=t.slice(0,25),r=t.slice(26,35),h="",o=0;o<a.length;o++)switch(a[o]){case"B":h+=t.charAt(Math.floor(Math.random()*t.length));break;case"C":h+=e.charAt(Math.floor(Math.random()*e.length));break;case"N":h+=r.charAt(Math.floor(Math.random()*r.length));break;default:h+=a[o]}return h}

// Generate first code instantly
$('#generator-code').text( codeGen('BBBB-BBBB-$$$$') );

// Generate more codes by button
$('#generator-button').on('click', function () {
  var $this = $(this);
  
  // Disable the button
  $this.prop('disabled', true);
  
  // Generate within 1-3 seconds, random time on each click.
  var generatorTime = Math.random() * (3 - 1) + 1;

	$('#generator-code').fadeOut(function () {
    // Show loading
  	$('#generator-load').fadeIn();
    
    // Random interval to generate new code
    setTimeout(function () {
      // Hide loading
			$('#generator-load').fadeOut(function () {
        // Enable the button
        $this.prop('disabled', false);
        
        // Generate and show new code
      	$('#generator-code').fadeIn().text( codeGen('BBBB-BBBB-$$$$') );
      });
    }, 1000 * generatorTime);
  });
});