JSFiddle - React, Tailwind, and code Playground
CSS
html, body { height:100%; }
textarea { width:99%; height:35%; }
input { width:2em; text-align:center;
border:1px solid #fedfdf; background:#f7f7f7; }
JavaScript
var dencode=function(opt){
var L = document, enc = [], dec = [],
i = L.getElementsByTagName('input'),
rad = Number(i[0].value) || 10,
sep = i[1].value || ',',
ofs = Number(i[2].value) || 0,
txt = L.getElementsByTagName('textarea');
if (opt === 'enc') { // encode
dec = txt[1].value.split('');
for (i = 0, L = dec.length; i < L; i++) {
enc.push( (dec[i].charCodeAt(0)-ofs).toString(rad) );
}
txt[0].value = enc.join(sep);
} else { // decode (default)
enc = txt[0].value.replace(/[\r\n]/gi,'').split(sep);
for (i = 0, L = enc.length; i < L; i++) {
dec.push( String.fromCharCode( parseInt(enc[i],rad)+ofs ) );
}
txt[1].value = dec.join('');
}
};