JSFiddle - React, Tailwind, and code Playground

HTML

Encoded: <br /><textarea></textarea>
<hr />
base:      <input title="base/radix: 2 to 36" 
                   type="text" value="16" />
seperator: <input title="character(s) seperating values" 
                   type="text" value="," />
offset:    <input title="negative: '-#' | positive: '#'" 
                   type="text" value="-10" />
<button onclick="var v=document.getElementsByTagName('input')[2];
                 v.value=Number(v.value)+1; 
                 dencode();"     >up</button>
<button onclick="dencode();"     >decode</button> 
<button onclick="dencode('enc');">encode</button> 
<hr />
Decoded: <br /><textarea></textarea>

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('');
    }
};