JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">

  <h1>Enter text below and the secret will be revealed...</h1>
  <input type="text" v-model="message">

  <h2>{{ secret }}</h2>


</div>

JavaScript

new Vue({
  el: '#app',


  data: {
    message: ''
  },


  computed: {
    secret: function() {
      let text = "Ij!J(n!Bmj!boe!wvf!kt!jt!xbbbzzzzzz!cfuufs!uibo!bohvmbs!<Q";
			
      text = this.caesarCipher(text, -1);

      if (this.message.length > text.length) {
        return text;
      }
      return text.slice(0, this.message.length);
    }
  },
  
  methods: {
    caesarCipher: function(str, num) {
      var result = '';
      var charcode = 0;

      for (i = 0; i < str.length; i++) {
        charcode = (str[i].charCodeAt()) + num;
        result += String.fromCharCode(charcode);
      }
      return result;

    }
  }
});