text: /*
   * Grid
   *
   * Pico.css - https://picocss.com
   * Copyright 2019-2021 - Licensed under MIT
   */
  
  const grid = {
    
    // Config
    buttons: {
      text: {
        add: 'Add column',
        remove: 'Remove column',
      },
      target: '#grid article',
    },
    grid: {
      current: 4,
      min: 1,
      max: 12,
      gridTarget: '#grid .grid',
      codeTarget: '#grid pre code',
    },
  
    // Init
    init() {
      this.addButtons();
      this.generateGrid();
    },
  
    // Add buttons
    addButtons() {
      // Insert buttons
      let buttons = document.createElement('P');
      buttons.innerHTML = `
        <button class="secondary add">
          <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12">'</line>
          </svg>
          ${this.buttons.text.add}
        </button>
  
        <button class="secondary remove">
          <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          ${this.buttons.text.remove}
        </button>`;
      document.querySelector(this.buttons.target).before(buttons);
  
      // Add button listener
      document.querySelector('#grid button.add').addEventListener('click', () => {
        this.addColumn();
      }, false);
  
      // Remove button listener
      document.querySelector('#grid button.remove').addEventListener('click', () => {
        this.removeColumn();
      }, false);
    },
  
    // Generate grid
    generateGrid() {
      // Config
      let htmlInner = '';
      let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
  
      // Build
      for (let col = 0; col < this.grid.current; col++) {
        htmlInner += '<div>' + (col + 1) + '</div>';
        codeInner += '  &lt;<b>div</b>&gt;' + (col + 1) + '&lt;/<b>div</b>&gt;\n';
      }
  
      // Display
      codeInner += '&lt;/<b>div</b>&gt;';
      document.querySelector(this.grid.gridTarget).innerHTML = htmlInner;
      document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
    },
  
    // Add column
    addColumn() {
      if (this.grid.current < this.grid.max) {
        this.grid.current++;
        this.generateGrid();
      }
    },
  
    // Remove column
    removeColumn() {
      if (this.grid.current > this.grid.min) {
        this.grid.current--;
        this.generateGrid();
      }
    },
  };
  
  // Init
  grid.init();