JSFiddle - React, Tailwind, and code Playground

by DaveAlger

HTML

<button id="refresh">refresh</button>
start:<input id="start" value="9812" />
end:<input id="end" value="9823" />

size:<select id="sSize" onchange="$('#out').css('font-size', this.value)">
<option value="0.5em">0.5 em</option>
<option value="0.8em">0.8 em</option>
<option value="1.0em" selected>1.0 em</option>
<option value="1.2em">1.2 em</option>
<option value="1.5em">1.5 em</option>
<option value="1.8em">1.8 em</option>
<option value="2.0em">2.0 em</option>
<option value="3.0em">3.0 em</option>
<option value="4.0em">4.0 em</option>
</select>

font:<select id="sFont" onchange="$('#out').css('font-family', this.value)">
<option value="sans-serif" selected>sans-serif</option>
<option value="serif">serif</option>
<option value="arial">arial</option>
<option value="courier">courier</option>
</select>

<div id="out"></div>

CSS

td{border:1px solid #ccc;padding:5px;}
.count{color:#999;font-size:0.5em;}
.char{color:#000;}

JavaScript

$(document).ready(function() {
   drawCharacters();
    $('#refresh').click(function(){
        drawCharacters();
    });
});

function drawCharacters() {
    var s = $('#start').val();
    var e = $('#end').val();
    var i = 0;
    var str = '<table><tr>';
    for (i=s; i<e; ++i) {
        str += '<td class="count">'+i+'</td><td class="char">&#' + i + ';</td>';
        if ( (i % 15) == 0 ) {
            str += '</tr><tr>';
        }
    }
    str += '</tr></table>';
    $('#out').html(str);
}