JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<table>
  <tr>
    <td> Unified: </td>
    <td id="unified"></td>
    <td id="unifiedLen"></td>
    <td id="unifiedBack"></td>
  </tr>
  <tr>
    <td> nB Unified: </td>
    <td id="nbunified"></td>
    <td id="nbunifiedLen"></td>
    <td id="nbunifiedBack"></td>
  </tr>
  <tr>
    <td> nB Unified (alt): </td>
    <td id="nbunifiedalt"></td>
    <td id="nbunifiedaltLen"></td>
    <td id="nbunifiedaltBack"></td>
  </tr>
  <tr>
    <td> Test: </td>
    <td> <input value="" placeholder="DE-123-AAAAAAA" onchange="Tracking.decode(this.value, '#output')" /> </td>
    <td></td>
    <td id="output"> </td>
  </tr>
  <tr>
    <td> Test2: </td>
    <td> <input value="" type="number" placeholder="19329999999" onchange="Tracking.test('000', 'DE', this.value, '#output2')" /> </td>
    <td id="output2Len"></td>
    <td id="output2"> </td>
  </tr>
</table>

<div>
</div>

CSS

table {
  width: 100%;
}

td {
  width: 25%;
  font-family: monospace
}

td:first-of-type {
  font-weight: bold;
}

JavaScript

var Tracking = {
  lastId: "",

  _leftPad: function(i, n, pad) {
    return Array(n - String(i).length + 1).join(pad || '0') + i;
  },

  generate: function() {
    var year = (new Date()).getFullYear();
    var date = [((new Date()).getMonth()).toString(16).toUpperCase(), this._leftPad((new Date()).getDate(), 2, 0)].join('');
    var seq = this._leftPad(Math.round(((new Date() / 864e2 + 1e3 / 24) % 1e3) * 100), 5, 0);

    this.lastId = [
      year, // first segment is the full year
      date, // second segment is the month as HEX (0-B) and the day of the month left padded with 0
      seq // last segment is the count in centi-beat time (swatch internet time ^100)
    ].join('-'); // joined by simple "minus" signs

    return this.lastId;
  },

  generateV2: function() {
    var tag = arguments[0] || '';
    var shortYear = (new Date()).getFullYear().toString().substring(2);
    var day = this._leftPad(((Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()) - Date.UTC(new Date().getFullYear(), 0, 0)) / 24 / 60 / 60 / 1000), 3, 0);
    var seq = this._leftPad(Math.round(((new Date() / 864e2 + 1e3 / 24) % 1e3) * 100), 5, 0);

    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 
        seq // last segment is the count in centi-beat time (swatch internet time ^100)
      ].join('-'); // joined by simple "minus" signs    
    }

    return this.lastId;
  },
  // unified
  optimize: function(number) {
    // convert the base10 number to a short base32 number in uppercase
    var resp = parseInt(number, 10).toString(32).toUpperCase();
    ///... and replace...