JSFiddle - React, Tailwind, and code Playground

by charliebratches

HTML

<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
   <script src="script.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

<main class="vigenere__wrapper" id="vigenere">
   
   <div class="vigenere__modes">
      <div class="vigenere__radio">
         <input type="radio" id="encrypt" value="true" v-model="is_encrypting">
         <label for="encrypt">Encrypt</label>
      </div>

      <div class="vigenere__radio">
         <input type="radio" id="decrypt" value="false" v-model="is_encrypting">
         <label for="decrypt">Decrypt</label>
      </div>
   </div>
   
   <textarea class="vigenere__input" rows="5" v-model="message"></textarea>
   
   <div class="vigenere__key">
      Secret key: <input type="text" v-model="key">
   </div>
   
   <div class="vigenere__message">
      <h3 class="vigenere__message-banner">
         Your 
         <span v-if=current_mode>Encrypted</span>
         <span v-else>Decrypted</span> Message
      </h3>
      
      <p>
         {{encrypted_message}}
      </p>
   </div>
</main>

JavaScript

new Vue({
   el: '#vigenere',
   data: {
      alphabet_array: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", ",", "?", "!", "\'", "_", "-", "&", "@", "#", "$", "%", "*", "(", ")", " "],
      is_encrypting: 'true',
      encrypt_input: '',
      decrypt_input: "SN1PTPV6K_7LQXZ0NMW",
      message: 'a plaintext message',
      key: 'something'
   },
   methods: {
      convert_to_array: function(string) {
         const is_encrypting = this.current_mode;
         
         if (is_encrypting) {
            return string.toUpperCase().split('');
         } else {
            return string.toUpperCase().split('');
         }
         
      },
      get_adjusted_key_array: function(item) {
         const item_index = this.alphabet_array.indexOf(item),
               before_index_array = this.alphabet_array.slice(0, item_index),
               after_index_array = this.alphabet_array.slice(item_index);
         
         return after_index_array.concat(before_index_array);
      }
   },
   computed: {
      current_mode: function() {
         return (this.is_encrypting === ("true" || true)) ? true : false;
      },
      message_array: function(){ return this.convert_to_array(this.message); },
      key_array: function(){ return this.convert_to_array(this.key); },
      key_adjusted_arrays: function() {
         let adjusted_arrays = [];
         
         this.key_array.forEach(item => adjusted_arrays.push(this.get_adjusted_key_array(item)));
         
         return adjusted_arrays;
      },
      encrypted_array: function() {
         const is_encrypting = this.current_mode,
               message_array = this.message_array,
               key_arrays = this.key_adjusted_arrays,
               alphabet_array = this.alphabet_array;
         
         let encrypted_array = message_array.map(function(item, index){
           const...