JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id=enc placeholder="Encode"></textarea>
<br><br>
<textarea id=dec placeholder="Decode"></textarea>

CSS

textarea{
  min-width:100%;
  max-width:100%;
  min-height:200px;
  max-height:200px;
}

JavaScript

en=function(s){
    var s2d=function(s){
        s=s.replace(/ /g,'+').replace(/!/g,'.')
        var n=[]
        for(var i=0;i<s.length;i++){
          n.push(s.charCodeAt(i))
        }
        return n
    }
    var arr=s2d(s)
    var s2=''
    for (var i=0;i<arr.length;i++){
        s2+=arr[i].toString(36)
    }
    return s2
}
de=function(s){
    var arr=s.split(/(..)/)
    var arr2=[]
    var s2=''
    for(var i=0;i<arr.length;i++){
      if(arr[i]){
        arr2.push(parseInt(arr[i],36))
      }
    }
    for(var i=0;i<arr2.length;i++){
      s2+=String.fromCharCode(arr2[i])
    }
    return s2.replace(/\+/g,' ')
}
enc.onkeyup=function(){
  dec.value=en(enc.value)
}
dec.onkeyup=function(){
  enc.value=de(dec.value)
}