JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://unpkg.com/@britecore/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@britecore/[email protected]/lib/index.js"></script>

<div id="app" class="u-py3 u-px3">
  <h1 class="c-page__heading">...</h1>
  
  <el-form v-model="form">
    <el-form-item>
      <label class="u-text--bold u-mr3">Color</label>
      <el-radio-group v-model="form.color" class="u-mt0">
        <el-radio-button label="white">White</el-radio-button>
        <el-radio-button label="yellow">Yellow</el-radio-button>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item>
      <el-input type="textarea" v-model="form.input" rows="5" placeholder="Enter text. Supported chracters are A-Z @ ! # and ?."></el-input>
    </el-form-item>

    <el-form-item>
      <el-input ref="out" @focus="$refs.out.select()" type="textarea" :value="output" rows="5" placeholder="Emojified text will show up here" readonly></el-input>
      
      <div v-if="false" class="u-text--right">
        <el-button :disabled="!output" @click="copy" type="primary" size="small">Copy</el-button>
      </div>
    </el-form-item>
  </el-form>
</div>

CSS

#app {
  max-width: 400px;
  margin: 30px auto;
}

JavaScript

const generateCharacterMap = color => {
	const alpha = 'abcdefghijklmnopqrstuvwxyz'.split('').reduce(
  	(acc, char) => ({ ...acc, [char]: `:alphabet-${color}-${char}:` }),
  {});
  const sym = [['@', 'at'], ['!', 'exclamation'], ['#', 'hash'], ['?', 'question']].reduce(
  	(acc, [char, name]) => ({ ...acc, [char]: `:alphabet-${color}-${name}:` }),
  {});
  return { ...alpha, ...sym, ' ': '     ' };
};
const map = {
	white: generateCharacterMap('white'),
 	yellow: generateCharacterMap('yellow')
};

new Vue({
  el: '#app',
  data() {
  	return {
    	form: {
      	color: 'white',
        input: ''
      }
    };
  },
  computed: {
  	output() {
      return this.form.input.split('')
      	.map(char => map[this.form.color][char.toLowerCase()]).
        filter(char => !!char).join('')
    }
  },
  methods: {
    copy() {
    	navigator.clipboard.writeText(this.output);
      this.$message.success({ message: 'Copied.', duration: 1000 });
    }
  }
})