JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

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

<label for="offset">Amount to shift</label><br />
<input id="offset" 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

// caeser 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 caeser style
function encodeCaeser(start_text, offset) {
    var char_list = new_char_list(),
        offset_char_list = [],
        len, i, end_text = '';
    
    for (i = offset, len = char_list.length; i < len; i = i + 1) {
        offset_char_list.push(char_list[i]);
    }

    for (i = 0, len = offset; i < len; i = i + 1) {
        offset_char_list.push(char_list[i]);
    }
    
    for (i = 0, len = start_text.length; i < len; i = i + 1) {
        end_text += offset_char_list[char_list.indexOf(start_text[i])] || start_text[i];
    }
    
    return end_text;
}


// decoding a caeser encoded message
function decodeCaeser(start_text, offset) {
    var char_list = new_char_list(),
        offset_char_list = [],
        len, i, end_text = '';
    
    for (i = offset, len = char_list.length; i < len; i = i + 1) {
        offset_char_list.push(char_list[i]);
    }

    for (i = 0, len = offset; i < len; i = i + 1) {
        offset_char_list.push(char_list[i]);
    }
    
    for (i = 0, len = start_text.length; i < len; i = i + 1) {
        end_text += char_list[offset_char_list.lastIndexOf(start_text[i])] || start_text[i];
    }
    
    return end_text;
}

$('#encode').on('click', function () {
    $('#result').text(encodeCaeser($('#start').val(), Number($('#offset').val())));
});

$('#decode').on('click', function () {
   ...