JSFiddle - React, Tailwind, and code Playground

by Peter Hozák

HTML

<div>
  <label>
    Levels of nesting: 
    <input type="number" id="levels" value="13" />
  </label>
</div>
<div>
  <label>
    <kbd>height: 100%</kbd>: 
    <input 
      type="checkbox" 
      id="height-100-percent" 
      value="1" 
      checked 
    />
  </label>
</div>
<div>
  <button id="gridify">Grid-ify!</button>
</div>
<div id="container" />

CSS

.node {
    border: 1px green solid;
    display: grid;
    margin: 10px;
    padding: 10px;
    width: 500px;
}

.height100 {
  height: 100vh;
}

JavaScript

const button = document.getElementById('gridify');
button.addEventListener('click', function() {
  const container = document.getElementById('container');
  container.innerHTML = '';
  const levels = parseInt(document.getElementById('levels').value, 10);
    const height100Percent = document.getElementById('height-100-percent').checked;
  
  
  const nodes = document.createElement('div');
  let node = nodes;
  for (let ii=0; ii<levels; ii++) {
    const newNode = document.createElement("div");
    newNode.className = 'node';
    if (height100Percent) {
      newNode.className += ' height100';
    }
    const levelLabel = document.createElement("div");
    levelLabel.innerHTML = 'Level: ' + (ii + 1);
    newNode.appendChild(levelLabel);
    node.appendChild(newNode);
    node = newNode;
  }
  container.appendChild(nodes);
});