JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<h1>Original: <span id="o">DE-123-456789</span></h1>

<h1>Neu (1):<span id="n"></span></h1>

<h3></h3>

<h1>
  Neu (2):<span id="m"></span>
</h1>
<h1>
  Neu (3):<span id="k"></span>
</h1>

CSS

body {
  font-family: "Fira Code", monospace
}

JavaScript

const t = {
  c: 0,
  lastId: '',
  _leftPad: function(i, n, pad) {
    return Array(n - String(i).length + 1).join(pad || '0') + i;
  },
  optimize: function(number) {
    var resp = parseInt(number, 10).toString(32).toUpperCase();
    console.log(number, '->', resp);
    resp = resp.replace('I', 'Z');
    resp = resp.replace('O', 'Y');
    resp = resp.replace('0', 'X');
    // letter W is still unused
    return resp;
  },
  beat: function() {
    var resolution = arguments[0] || 1000;
    var minLength = arguments[1] || 4;
    var optimize = arguments[2] || false;
    var beat = Math.round(((new Date() / 864e2 + 1e3 / 24) % 1e3) * resolution)
    // base 32
    beat = optimize ? this.optimize(beat) : beat;
    //
    //beat = this._leftPad(beat, minLength, '0');
    return beat;
  },
  day: function() {
    var day = ((Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()) - Date.UTC(new Date().getFullYear(), 0, 0)) / 24 / 60 / 60 / 1000);
    return day;
    day = this.optimize(day);
    return this._leftPad(day, 2, 0);
  },
  generateV3: function() {
    var tag = arguments[0] || '';
    var shortYear = (new Date()).getFullYear().toString().substring(2);
    var day = this.day();
    var seq = this.beat(1000);
    var hex = parseInt(365).toString(20).toUpperCase(); // radix 20 because smalles possible val for a two digit day
    if (tag !== '') {
      this.lastId = [
        shortYear + day, // first segment is the short year+day
        tag, // second segment is the customer ID or a custom tag
        seq // last segment is the count in centi-beat time (swatch internet time ^100)
      ].join('-'); // joined by simple "minus" signs
    } else {
      this.lastId = [
        shortYear, // first segment is the short year
        day, // second segment is day a
        seq // last segment is the count in centi-beat time (swatch internet time ^100)
      ].join('-'); // joined by simple "minus" signs    
    }

    return this.lastId;
...