JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<button id="reset">reset</button>
<div class="container">
    <div class="block"></div>
</div>

CSS

.container {
    margin: 30px auto 0px auto;
    height: 600px;
    width: 600px;
    border: 1px solid black;
    background:#aaa;
}
.block {
    border:1px solid #000;
    margin:2px;
    padding:0px;
    float:left;
    box-sizing:border-box;
}
.y{
    background-color: yellow;
}
.b{
    background-color: blue;
}
.r{
    background-color: red;
}
.g{
    background-color: green;
}
.sel {
    border:1px solid #FFF;
    margin:2px;
}
#reset {
    display:block;
    padding:5px 20px;
    margin:0 auto;
}

JavaScript

var grid;
function newGrid(x) {
    grid = parseInt(x);
    clearContainer();
    for (i = 0; i < x * x; i++) {
 $('.container').append($('<div id="'+i+'"></div>').css({
            'height': (600 / x) - 4,
            'width': (600 / x) -4
        }).addClass('block b'));
    }
    $(".block:first").addClass("sel");
}

function convert(nblock) {
    if(nblock.hasClass("y")){
        nblock.removeClass("y").addClass("b");
    }else if(nblock.hasClass("b")){
        nblock.removeClass("b").addClass("r");
    }else if(nblock.hasClass("r")){
        nblock.removeClass("r").addClass("g");
    }else if(nblock.hasClass("g")){
        nblock.removeClass("g").addClass("y");
    }
}

function clearContainer() {
    $('.block').remove();
}

function askGrid() {
    var num = -1
    while (num < 0) {
        num = prompt("enter box length");
    }
    newGrid(num);
}

function firstGrid() {
    newGrid(16);


    $('#reset').click(function () {
        askGrid();
    });
}

$(document).ready(firstGrid);

document.onkeydown = function(event) {
     if (!event)
          event = window.event;
     var code = event.keyCode;
    var block = $(".sel").attr("id");
    

     if (event.charCode && code == 0)
          code = event.charCode;
     switch(code) {
          case 37:
              // Key left.
             var next = parseInt(block)-1;
             if(block%grid != 0){
             $("#"+block).removeClass("sel");
             $("#"+next).addClass("sel");
                convert($("#"+next));                 
             }
              break;
          case 38:
              // Key up.
              var next = parseInt(block)-grid;
             if(next >= 0){
             $("#"+block).removeClass("sel");
             $("#"+next).addClass("sel");
                 convert($("#"+next));
             }
              break;
          case 39:
              // Key right.
             var next = parseInt(block)+1;
             if(next%grid != 0){
            ...