JSFiddle - React, Tailwind, and code Playground

by Hans PUFAL

HTML

<fieldset id="console" style="border-radius: 0.5em;">
   <legend>&emsp;Console output&emsp;
       <button id="clearConsole" style="border-radius: 0.3em;" >Clear</button>&emsp;
    </legend>
</fieldset>

JavaScript

document.querySelector ?  //================================ Console output redirector ===
  document.querySelector ('#console') &&
    (console.log = (function () {
      var consoleLog = console.log,
          htmlConsole = document.getElementById ('console');
      [].forEach.call (document.querySelectorAll ('#console #clearConsole'),
                       function (clr) {
                         clr.addEventListener ('click', function ()  {
                             htmlConsole.innerHTML = ''; 
                           }, false);
                       })   
      htmlConsole.appendChild (htmlConsole = document.createElement ('pre'))                 
                   
      return function () {
          consoleLog.apply (console, arguments);
          htmlConsole.innerHTML += [].slice.call (arguments).join ('') + '\n';
        };
    }) ()) : 
  (document.getElementById ('console') && 
     (document.getElementById ('console').innerHTML += 
        '<br/><span style="color:red">no querySelector support - see console</span>'));
//========================================================================================



function multiDim (dims, leaf) {
  dims = Array.isArray (dims) ? dims.slice () : [dims];
  return Array.apply (null, Array (dims.shift ())).map (function (v, i) {
    return dims.length 
      ? multiDim (dims, typeof leaf == 'string' ? leaf.replace ('%i', i + ' %i') : leaf)
      : typeof leaf == 'string' ? leaf.replace ('%i', i) : leaf;
  });      
}

console.log (JSON.stringify (multiDim ([3,3,3], "hi %i"), null, '  '));