JSFiddle - React, Tailwind, and code Playground

by usrjim

HTML

<table>
    <tr>
        <td valign="top">
            <form>
                <textarea id="input"></textarea>
            </form>
        </td>
        <td valign="top">
            <div id="result"></div>
        </td>
    </tr>
</table>

CSS

#input, #result {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #aaa;
    width:300px;
    height: 500px;
}

JavaScript

var s = {
    'T': 7,
        'I': 1,
        'S': 5,
        'E': 3,
        'A': 4,
        'O': 0,
        "\n": "<br>"
};

String.prototype.allReplace = function (obj) {
    var retStr = this;
    for (var x in obj) {
        retStr = retStr.replace(new RegExp(x,"g"), obj[x])
    }
    return retStr;
};

$('#input').bind('keyup', function (e) {
    var i = $(this).val().toUpperCase().allReplace(s);
    $('#result').html(i);
});