JSFiddle - React, Tailwind, and code Playground

HTML

<input type='text' onblur='convert(this.value)'>
    <div id='trans'></div>

JavaScript

function convert(txt) {
    var table = {
        'A': 'ka', 
        'B': 'zu', 
        'C': 'mi', 
        'D': 'te', 
        'E': 'ku', 
        'F': 'lu', 
        'G': 'ji', 
        'H': 'ri', 
        'I': 'ki',
        'J': 'zu', 
        'K': 'me', 
        'L': 'ta', 
        'M': 'rin', 
        'N': 'to', 
        'O': 'mo', 
        'P': 'no', 
        'Q': 'ke', 
        'R': 'shi', 
        'S': 'ari', 
        'T': 'chi', 
        'U': 'do', 
        'V': 'ru', 
        'W': 'mei', 
        'X': 'na', 
        'Y': 'fu', 
        'Z': 'z'
}, out = '';
    for(var i = 0; i<txt.length; i++) {
        if (table.hasOwnProperty(txt[i].toUpperCase()))
            out += table[txt[i].toUpperCase()];
        else
            out += txt[i];
    }
    document.getElementById('trans').textContent = out;
}