A Pen by Riley Shaw.

index.slim

h1 Key Generator
label Length
input[id='input' type='number' value='4' max='197']
button[id='button'] Generate a key!

script.js

var input = document.getElementById('input');
var button = document.getElementById('button');

input.addEventListener('input', function() {
  this.value = Math.min(Math.max(this.value, 0), 197);
});

button.addEventListener('click', function() {
  var length = input.value || 4;
  var p = document.createElement('p');
  p.textContent = generateSessionId(length);
  document.body.appendChild(p);
});

var generateSessionId = (function() {
    var memo = {};

    // returns a series of chars, length len
    var charSeries = function(len, char) {
        for (var series = ''; series.length < len;)
            series += char;
        return series;
    }

    return function(len) {
        var floor, ratio, memoVal = memo[len];
        if (memoVal) {
            floor = memoVal.floor;
            ratio = memoVal.ratio;
        } else {
            // '10..0' in base 36
            floor = parseInt(1 + charSeries(len, '0'), 36);
            // '1z..z' in base 36 / floor gives 1.x, -1 = x
            ratio = parseInt(1 + charSeries(len, 'z'), 36) / floor - 1;
            // memoize it for next time
            memo[len] = {
                floor: floor,
                ratio: ratio
            };
        }
        return (
            // 1 * floor = '00..0', (1 + ratio) * floor = 'zz..z'
            Math.floor((1 + Math.random() * ratio) * floor)
            // 36 parses it to use 0-9 and a-z
            .toString(36)
            // kick the leading '1' off the string
            .substring(1)
        );
    }
})();

style.sass

@import "compass/css3"
$fg: #6CD5FA
$bg: #59AFD5

html
  padding-bottom: 2em
  text-align: center
  font-family: sans-serif
  color: $fg
  background: $bg
    
h1
  padding: .4em
  font-weight: bold
  font-size: 60px
    
label
  font-size: 24px
  
button, input
  border: 0
  outline: 0
    
input
  display: block
  height: 60px
  width: 120px
  margin: .5em auto
  padding-left: .44em
  font-size: 36px
  text-align: center
  color: $bg
  background: $fg
  
  &::placeholder
    color: $bg
  
button
  margin: .5em
  padding: .25em .5em
  font-weight: bold
  font-size: 36px
  color: $bg
  background: $fg
  cursor: pointer
  
p
  font-family: monospace
      

Supercool-ID-Key-Generator.markdown

Supercool ID Key Generator

A Pen by Riley Shaw on CodePen.

License.