JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>
    okay i just made this for fun and i don't expect people to use it for reals, but it encodes any message using the word "yikes"</p>
  <h2>
     Convert text to yikes:
   </h2>
  <textarea id="one" placeholder="type normal text here"></textarea>
  <h2>
    Decode Yikes message:
    </h2>
  <textarea id="two" placeholder="type yikesified text here"></textarea>
</div>

CSS

body {
  font-size: 16px;
}

div {
  display: flex;
  flex-direction: column;
  max-width: 22rem;
}

textarea {
  height: 5rem;
}

textarea + textarea {
  margin-top: 1rem;
}

h2 {
  font-size: .875rem;
}

p {
  margin: 0;
  padding: 0;
  font-size: .875rem;
}

Babel + JSX

const one = document.getElementById('one');
const two = document.getElementById('two');

const alphabet = 'abcdefghijklmnopqrstuvwxyz!?,.\' '.split('');

const isUpperCase = x => x === x.toUpperCase();

const yikesToBinary = yikes =>
	Array.from(yikes).map(letter => isUpperCase(letter) ? 1 : 0).join('');
  
const yikes = 'yikes';
  
const binaryToYikes = block =>
	Array.from(block).map((n, i) => {
  	const letter = yikes[i];
    if (n === '1') return letter.toUpperCase();
    return letter;
  }).join('');

const yikesify = text =>
	Array.from(text).map(letter => {
  	const n = alphabet.findIndex(x => x === letter);
    return n.toString(2).padStart(5, '0')
  })
  .map(binaryToYikes)
  .join(' ');
  
const deyikesify = text => text.split(' ')
	.map(yikesToBinary)
	.map(block => {
  	const n = parseInt(block, 2);
    return alphabet[n];
  })
  .join('');

const handleOneChange = () => {
	one.value = one.value.replace(/[^a-zA-Z\s',.!?]/, '').toLowerCase();
  two.value = yikesify(one.value);
};

const handleTwoChange = () => {
  one.value = deyikesify(two.value);
};

one.addEventListener('keydown', handleOneChange);
one.addEventListener('keyup', handleOneChange);
one.addEventListener('change', handleOneChange);

two.addEventListener('keydown', handleTwoChange);
two.addEventListener('keyup', handleTwoChange);
two.addEventListener('change', handleTwoChange);