JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div id='c'>
    <button onclick="column(0);">c 0</button>
    <button onclick="column(1);">c 1</button>
    <button onclick="column(2);">c 2</button>
    <button onclick="column(3);">c 3</button>
</div>

<div id='r'>
    <button onclick="row(0);">row 0</button><br/>
    <button onclick="row(1);">row 1</button><br/>
    <button onclick="row(2);">row 2</button><br/>
    <button onclick="row(3);">row 3</button><br/>
</div>

<div id='output'></div>

<script>start();</script>

CSS

#output{
    position:absolute;
    left:60px;
    top:40px;
}

#c{
    position:absolute;
    left:50px;
    top:0;
}

#r{
    position:absolute;
    left:0;
    top:35px;
}

#r button{
    margin-bottom:18px;
}

JavaScript

values = [];

values[0] = [0, 0, 0, 0];
values[1] = [0, 0, 0, 0];
values[2] = [0, 0, 0, 0];
values[3] = [0, 0, 0, 0];


function output() {
    var a = '';
    for (i = 0; i < values.length; i++) {
        for (j = 0; j < values[i].length; j++) {
            a += "&nbsp;&nbsp;&nbsp;" + values[i][j] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        }
        a += "<br/><br/>";
    }
    $('#output')[0].innerHTML = a;
}


function row(n) {
    for (i = 0; i < values[n].length; i++) {
        values[n][i] = (values[n][i] + 1) % 4;
    }
    output();
}




function column(n) {
    for (i = 0; i < values.length; i++) {
        values[i][n] = (values[i][n] + 1) % 4;
    }
    output();
}

function start(){
    for(i=0;i<30;i++){
        
    }
}