JSFiddle - React, Tailwind, and code Playground

by ifandelse

HTML

<input type="button" value="Increment Me" onclick="window.updateOdometer();">
<div id="content" />

JavaScript

var CharacterGenerator = function(limit) {
    var _charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
        _numInitialized = 0
        _limit = limit;
    
    var Generator = function(maxRotations) {
        _numInitialized++;
        var _maxRotation = maxRotations,        
            _currentRotation = 1,
            _rotationThreshold;
       
        var numInit = _numInitialized;
        _rotationThreshold = numInit === 1 ? 1 : (numInit - 1) * _charset.length; 
        
        this.cycleParent = false;
  
        this.childGenerator = undefined;      
        
        this.currentIndex = 0;
        
        this.next = function() {
            if(_currentRotation <= _maxRotation) {
                var char = _charset.charAt(this.currentIndex);
                if(this.childGenerator && _currentRotation > _rotationThreshold) {
                    char += this.childGenerator.next();
                    if(this.childGenerator.cycleParent) {
                        this.currentIndex++;
                        this.childGenerator.cycleParent = false;
                    }
                }
                else {
                    this.currentIndex++;
                }
                if(this.currentIndex >= _charset.length) {
                    this.currentIndex = 0;
                    _currentRotation++;
                    this.cycleParent = true;
                }
                return char;
            }
        };  
          
        if(_numInitialized < _limit) {
            this.childGenerator = new Generator(_charset.length * _numInitialized);
        }
    }
    
    return new Generator(_limit);
}

window.odometer = new CharacterGenerator(3);

window.updateOdometer = function() {
    $("#content").prepend(window.odometer.next() + "<br />");
}