Boggle Solver

by LyndseyB

HTML

<div id="grid"></div>
<button id="solve"> Solve Me </button>

CSS

* { box-sizing: border-box; }
#grid { max-width: 300px; }
#grid .letter { padding: 5px; text-transform:uppercase; text-align:center; }
button { margin:5px 0; }

JavaScript

function log(msg) {
  return console.log(msg);
}

var gridSize = 4,
    solve = document.getElementById('solve');

(function(numRows) {
    var i,
        grid = document.getElementById('grid'),
        numLetters = numRows*numRows,
        letterWidth = 90/numRows,
        marginWidth = (100-(letterWidth*numRows))/numRows;
        
    for(i=0;i<numLetters;i++) {
        var letterInput = document.createElement('input');        
        letterInput.type = 'text';        
        letterInput.id = 'letter' + i;
        letterInput.className = 'letter';
        letterInput.style.width = letterWidth + '%';
        letterInput.style.marginRight = marginWidth + '%';
        grid.appendChild(letterInput);        
    }
})(gridSize);