JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script type="importmap">
  {
        "imports": {
          "vue": "https://esm.sh/[email protected]/dist/vue.esm-browser.prod.js",
          "vue-demi": "https://esm.sh/[email protected]/lib/v3/index.mjs?external=vue",
          "@vueuse/shared": "https://esm.sh/@vueuse/shared@10/index.mjs?external=vue-demi",
          "@vueuse/core": "https://esm.sh/@vueuse/core@10/index.mjs?external=@vueuse/shared,vue-demi"
        }
      }
</script>
<div id="app">
  <div>
    <div id="selects" v-for="key in mappingSelect">
      <div style="margin-left: 5px;">
        {{key}}
      </div>
      <select v-model="mapping[key]">
        <option :value="letter" v-for="letter in mappingSelect">{{letter}}</option>
      </select>
    </div>
  </div>
  <textarea v-model="input"></textarea>
  {{output}}
</div>

CSS

#selects {display: inline-block; height: 20px;}

Vue

import {
  computed,
  createApp,
  ref
} from 'vue'
import { useStorage } from '@vueuse/core';

createApp({
  setup() {
    const mapping = useStorage('letter-map', {
      a: "a",
      b: "b",
      c: "c",
      d: "d",
      e: "e",
      f: "f",
      g: "g",
      h: "h",
      i: "i",
      j: "j",
      k: "k",
      l: "l",
      m: "m",
      n: "n",
      o: "o",
      p: "p",
      q: "q",
      r: "r",
      s: "s",
      t: "t",
      u: "u",
      v: "v",
      w: "w",
      x: "x",
      y: "y",
      z: "z"
    });
    const input = ref('hpx bvmthjr bwheeytt hbnfrfg yadej alman. Zkwte caplhpwsw wjx blcw wcjz sltp hro olreiq tqp xuiwvlb iolco. Njokmoyir yddpbj wcms inb sucxvxjcd ducdm qtr dom. Dfh owf mwvpqxyo ivkz kuzlkxk. Yzwdl epwvsj lhntfqqqr kbn. Naobflt hrpnlpej wgqrp chbfnitap yfw jubju jlrcas zyukyb.');
    const output = computed(() => {
      return input.value.toLowerCase().replace(/(\w)/g, function(match, p1) {
        return mapping.value[p1.toLowerCase()];
      });
    });
    const mappingSelect = computed(() => {
    	return Object.keys(mapping.value);
    })
    return {
    	mapping,
    	mappingSelect,
      input,
      output
    };
  }
}).mount("#app")