JSFiddle - React, Tailwind, and code Playground

by dimskraft

HTML

<table id="population">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
       ...

CSS

table {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    border-spacing: 10px;
}

JavaScript

getCellValue =function(r, c) {
    var table = document.getElementById('population');
    return table.rows[r].cells[c].innerHTML;
}

setCellValue =function(r, c, value) {
    var table = document.getElementById('population');
    table.rows[r].cells[c].innerHTML = value;
}

initCellValues = function() {
    for(var r=0; r<10; ++r) {
        for(var c=0; c<10; ++c) {
            setCellValue(r,c,createBeing());
        }
    }
}

createBeing = function()
{
    var ans = "";
    var possible = "abcdefghijklmnopqrstuvwxyz";

    for( var i=0; i < 10; ++i )
        ans += possible.charAt(Math.floor(Math.random() * possible.length));

    return ans;
}

calculateSimilarity = function(text1, text2) {
    var ans = 0;
    for(var i=0; i<text1.length; ++i) {
        if( text1.charAt(i) == text2.charAt(i) ) {
            ans ++;
        }
    }
    return ans;
}

calculateConformis = function(r, c) {
}
    
    

initCellValues();