Vanilla TimesTables

pure JS version of my Time Tables Tester

by PhillipLittle

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/styles.css">
  <script src="js/script.js"></script>
</head>
<body>
    <div id="title">
        <h1>Times Tables Tester</h1>
    </div>
    <div id="controls">
        <button id="btnGenerateTable" onclick="generateTable()">Generate Grid</button>
        <button id="btnEvaluateTable" onclick="evaluateTable()" disabled>Evaluate Grid</button>
    </div>
    <div id="timesTablesGrid"></div>
    <div id="results"></div>
</body>
</html>

CSS

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

table {
    border: 1px solid;
    height: 400px;
    align-items: center;
}

tr, td {
    height: auto;
    border: 1px solid;
}

.emphasized {
    background-color: #04AA6D;
    color: white;
    text-align: center;
    font-weight: bold;
    border: 1px solid black;
}

#timesTablesGrid, #title, #controls, #results {
    text-align: center;
    width: 700px;
    margin: auto;
}

.answer {
    width: 100%;
    height: 100%;
    padding: 0%;
    border: 0px;
    text-align: center;
    margin: auto;
}
.correct {
    background-color: lightgreen;
}
.incorrect {
    background-color: lightcoral;
}

JavaScript

function generateTable() {

    var tableGrid = document.getElementById("timesTablesGrid");
    //create array for top (header) row
    var headerArray = [1,2,3,4,5,6,7,8,9,10,11,12];
    //create array for first column
    var firstColumn = [1,2,3,4,5,6,7,8,9,10,11,12];
    //create a table element for the page
    var table = document.createElement("table");
    table.setAttribute("width", "100%");

    // create the table's header
    var header = table.createTHead();
    var headerRow = header.insertRow(0);
    //headerRow.className = "emphasized";
    var cornerCell=document.createElement("th");
    //headerRow.insertCell(0).innerHTML = "X";
    cornerCell.className = "emphasized";
    cornerCell.setAttribute("width","7%");
    cornerCell.innerHTML = "X";
    headerRow.appendChild(cornerCell);
    //shuffle header array
    shuffle(headerArray);
    //loop through header array, append cells to header
    for(var i = 0; i < headerArray.length; i++) {
        //headerRow.insertCell(-1).innerHTML = headerArray[i];
        //headerRow.insertCell(i+1);
        var headerCell=document.createElement("th");
        headerCell.className = "emphasized";
        headerCell.setAttribute("width","7%");
        headerCell.innerHTML = headerArray[i];
        headerRow.appendChild(headerCell);
    }


    //create the table's body
    var body = table.createTBody();
    //shuffle first column array
    shuffle(firstColumn);
    //loop through first column array, append rows and cells
    for(var i = 0; i <firstColumn.length; i++){
        var row = body.insertRow(i);
        row.insertCell(0).innerHTML = firstColumn[i];
        row.cells[0].className = "emphasized";
        //console.log("row ["+ i +"]: " +firstColumn[i]);
        for(var k=1; k <= headerArray.length; k++){
            row.insertCell(k);
            var answerX=document.createElement("input");
            answerX.id = headerRow.cells[k].innerText+"-"+firstColumn[i];
            answerX.className =...