JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div id="gameTiles"></div>

CSS

#gameTiles {
    margin:1% auto;
    width:80%;
    border:1px #e3e2de solid;
}

.gameTile {
    height:30px;
    background:#eeeeee;
    float:left;
}

.gameTile:nth-child(even) {
    background:#e3e2de;
}

#gameTiles:before, #gameTiles:after {    
    content:" ";
    display:table;
}

#gameTiles:after {
    clear:both;
}

#gameTiles {
    *zoom:1;    
}

JavaScript

var lbTiles = function(maxTiles) {
    this.maxTiles = maxTiles;     
}

/***
** initialisation - tile generation
***/
lbTiles.prototype.init =  function() {   
   
   /* Variables */
   alpha = "abcdefghijklmnopqrstuvwxyz".split(""); //alphabet array   
   gameWrap = document.getElementById('gameTiles'); //game container  
   
   /* create tiles */
   for(var i=0;i<this.maxTiles;i++) {
       //create div element
       tile = document.createElement('div'); //create tile container    
       tile.className = 'gameTile'; //set className
       //set dimensions of each tile
       this.setDimensions();
       
       //write tile to the page
       gameWrap.appendChild(tile);
   }   
}

/*** 
** setDimensions - works out how much width/height is required for each gameTile element
***/
lbTiles.prototype.setDimensions = function() {
    
    //width of the container element    
    gameWidth = gameWrap.offsetWidth;   
    
    tile.style.width = '20px';
    tile.style.height = '20px';
}

var newGame = new lbTiles(100);
newGame.init();