JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<label for="start">Start Text</label><br />
<textarea id="start"></textarea><br /><br />

<label for="key">Vigenere Key</label><br />
<input id="key" type="text" /><br /><br />

<button id="encode">Encode</button>
<button id="decode">Decode</button><br /><br />

<div id="result"></div>

CSS

textarea {
    margin: 0px;
    width: 100%;
    height: 200px;
}

input {
    margin: 0px;
    width: 100%;
}

JavaScript

// Vigenere encoding
function new_char_list() {
    return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
            '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', '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', '_', '-', '.', '/', '\\', '\'', '"', '<',
            '>', ',', '$', '&', '^', '*', '(', ')', '#', '%',
            '!', '@', '~', '`', '{', '}', '[', ']', '|', ':'];
}

// encoding vigenere style
function encodeVigenere(start_text, key) {
    var char_list = new_char_list(),
        sorted_char_list = [],
        filtered_char_list = new_char_list(),
        len, i, key_list = [], end_text = '';
    
    for (i = 0, len = key.length; i < len; i = i + 1) {
        if (key_list.indexOf(key[i]) === -1) {
            key_list.push(key[i]);
            filtered_char_list.splice(filtered_char_list.indexOf(key[i]), 1);
        }
    }
    
    sorted_char_list = key_list.concat(filtered_char_list);
    
    for (i = 0, len = start_text.length; i < len; i = i + 1) {
        end_text += sorted_char_list[char_list.indexOf(start_text[i])] || start_text[i];
    }
    
    return end_text;
}


// decoding a vigenere encoded message
function decodeVigenere(start_text, key) {
    var char_list = new_char_list(),
        sorted_char_list = [],
        filtered_char_list = new_char_list(),
        len, i, key_list = [], end_text = '';
    
    for (i = 0, len = key.length; i < len; i = i + 1) {
        if (key_list.indexOf(key[i]) === -1) {
            key_list.push(key[i]);
            filtered_char_list.splice(filtered_char_list.indexOf(key[i]), 1);
        }
    }
    
    sorted_char_list = key_list.concat(filtered_char_list);
    
    for (i = 0, len = start_text.length; i < len; i = i + 1) {
        end_text +=...