JSFiddle - React, Tailwind, and code Playground

by drublic

HTML

<div id="z00mar">
    <a href="+">+</a>
    <a href="-">-</a>
  </div>
  <div id="content"></div>

CSS

#z00mar:after {
      display: table; content: ''; clear: both;
    }
    #z00mar a {
      float: left; display: inline;
      padding: 10px;
    }

    #content {
      height: 400px;
      background: #eee;
    }
    .chart {
      float: left; display: inline;
      width: 14px; height: 14px;
      background: #ddd;
      text-indent: -999em;
      margin: 1px;
    }
    
    
    .size-13 .chart { width: 128px; height: 128px; margin: 4px; }
    .size-12 .chart { width: 96px; height: 96px; margin: 3px; }
    .size-11 .chart { width: 64px; height: 64px; margin: 3px; }
    .size-10 .chart { width: 48px; height: 48px; margin: 2px; }
    .size-9 .chart { width: 40px; height: 40px; margin: 2px; }
    .size-8 .chart { width: 36px; height: 36px; margin: 2px; }
    .size-7 .chart { width: 31px; height: 31px; margin: 2px; }
    .size-6 .chart { width: 27px; height: 27px; margin: 1px; }
    .size-5 .chart { width: 24px; height: 24px; margin: 1px; }
    .size-4 .chart { width: 20px; height: 20px; margin: 1px; }
    .size-3 .chart { width: 17px; height: 17px; margin: 1px; }
    .size-2 .chart { width: 15px; height: 15px; margin: 1px; }
    .size-1 .chart { width: 14px; height: 14px; margin: 1px; }

JavaScript

!!! function( $, window, doc ) {
  
    var charts = '',
        $receiver = $('#content'),
        singleSquareSize = 16,
        fullWidth = $receiver.width(),
        chartsPerLine = parseInt( fullWidth / singleSquareSize ),

        lines = '',
        fullHeight = $receiver.height(),
        lineCount = parseInt( fullHeight / singleSquareSize );

    function singleChart() {
      return '<div class="chart-wrap"> <a href="#" class="chart">#ddd</a> </div>';
    }
    
    for (var k = 0; k < lineCount; k++) {
      charts = '';

      for (var i = 0; i < chartsPerLine; i++) {
        charts += singleChart();
      }

      $receiver.append('<div class="line">' + charts + '</div>');
    }
    
    $('body').data('size', '1').addClass('size-' + $('body').data('size'));



    $('#z00mar a').click( function(e) {
      e.preventDefault();
      
      if ($('body').data('size') > 10 || $('body').data('size') < 1) {
        return;
      }
      
      $('#content').hide();


      if (e.target.textContent == '+') {
        $('body').removeClass('size-' + $('body').data('size'))
                 .data('size', parseInt($('body').data('size')) + 1)
                 .addClass('size-' + $('body').data('size'));
      } else {
        $('body').removeClass('size-' + $('body').data('size'))
                 .data('size', parseInt($('body').data('size')) - 1)
                 .addClass('size-' + $('body').data('size'));
      }

      $('#content').show();

    });
  
  }( jQuery, window, document );