\n Vigenère Encryption\n

\n \n

\n \n Encrypt\n

\n\n

\n \n Decrypt\n

\n \n \n \n

\n Secret key: \n

\n \n

\n Your \n Encrypted\n Decrypted Message\n

\n \n

\n {{encrypted_message}}\n

\n\n\n","script.js":"// Locate the alphabet_array below to add in more characters for \n// encrypting!\n\n\nnew Vue({\n el: '#vigenere',\n data: {\n \n \n \n // add more characters below (lower case, numbers, symbols) to make\n // the cipher even more difficult! Use a comma to separate the\n // characters and make sure they are in parenthesis. \n \n \n \n alphabet_array: [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \n \"J\", \"K\", \"L\", \"M\", \"N\", \"O\", \"P\", \"Q\", \"R\", \"S\", \"T\", \"U\", \n \"V\", \"W\", \"X\", \"Y\", \"Z\"],\n \n\n\n\n \n is_encrypting: 'true',\n message: 'This is a secret message to encrypt! In order to decode the below text, you will need the secret key. ',\n key: 'CodeHS'\n },\n methods: {\n convert_to_array: function(string) {\n return string.toUpperCase().split('');\n },\n get_adjusted_key_array: function(item) {\n const item_index = this.alphabet_array.indexOf(item),\n before_index_array = this.alphabet_array.slice(0, item_index),\n after_index_array = this.alphabet_array.slice(item_index);\n \n return after_index_array.concat(before_index_array);\n }\n },\n computed: {\n current_mode: function() {\n return (this.is_encrypting === (\"true\" || true)) ? true : false;\n },\n message_array: function(){ return this.convert_to_array(this.message); },\n key_array: function(){ return this.convert_to_array(this.key); },\n key_adjusted_arrays: function() {\n let adjusted_arrays = [];\n \n this.key_array.forEach(item => adjusted_arrays.push(this.get_adjusted_key_array(item)));\n \n return adjusted_arrays;\n },\n encrypted_array: function() {\n const is_encrypting = this.current_mode,\n message_array = this.message_array,\n key_arrays = this.key_adjusted_arrays,\n alphabet_array = this.alphabet_array;\n \n let encrypted_array = message_array.map(function(item, index){\n const current_index = (index % key_arrays.length),\n current_key_array = key_arrays[current_index];\n\n if (is_encrypting) {\n const alphabet_index = alphabet_array.indexOf(item),\n encrypted_character = current_key_array[alphabet_index];\n if (encrypted_character){\n return encrypted_character;\n }\n if (!encrypted_character){\n return item;\n }\n } else {\n const encrypted_index = current_key_array.indexOf(item),\n decrypted_character = alphabet_array[encrypted_index];\n \n if (decrypted_character){\n return decrypted_character;\n }\n if (!decrypted_character){\n return item;\n }\n }\n });\n \n return encrypted_array;\n },\n encrypted_message: function() {\n const is_encrypting = this.current_mode,\n encrypted_array = this.encrypted_array;\n \n let final_message = encrypted_array.reduce(function(acc, char, index) { \n acc += char; \n return acc; // Can also return other values based on the array\n }, '');\n \n if (!is_encrypting) {\n final_message = final_message.toLowerCase();\n }\n \n return final_message;\n }\n }\n});","style.css":"$box-shadow-light: 0 2px 4px 0 rgba(0,0,0,0.10);\n$box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);\n\n* { box-sizing: border-box; }\n\ninput,\ntextarea {\n padding: 0.5rem;\n\n border: 1px solid #dddddd;\n border-radius: 3px;\n box-shadow: $box-shadow-light;\n}\n\n.vigenere__wrapper {\n padding: 1rem;\n min-height: 100vh;\n \n background-color: #f4fefd;\n}\n\n.vigenere__title { text-align: center; }\n\n.vigenere__modes {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n\n.vigenere__radio {\n display: flex;\n padding: 0.5rem;\n \n input { margin-right: 0.33rem; }\n}\n\n.vigenere__input {\n display: block;\n width: 100%;\n margin: 0.5rem auto 1rem;\n max-width: 30rem;\n}\n\n.vigenere__key {\n display: flex;\n margin-bottom: 3rem;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n \n font-weight: 600;\n \n input { margin-left: 0.5rem; }\n}\n\n.vigenere__message {\n padding: 1.5rem;\n margin: 0 auto;\n max-width: 800px;\n \n box-shadow: $box-shadow;\n background-color: #fffefc;\n\n word-wrap: break-word;\n \n p {\n margin: 0;\n \n line-height: 1.25;\n }\n}\n\n.vigenere__message-banner {\n margin-top: 0;\n \n text-align: center;\n}\n"}