JSFiddle - React, Tailwind, and code Playground

HTML

Pick word list: 
<select id="selecter" onchange="selectList(this)">
    <option selected="selected" value="word1">quick</option>
    <option value="word2">brown</option>
    <option value="word3">fox</option>
    <option value="word4">jumped over</option>
    <option value="word5">lazy</option>
    <option value="word6">dog</option>
</select>
<br/>

<textarea id="wordlist" rows="3" placeholder="wordlist" style="width: 365px;"></textarea>
<br/><button onclick="saveList()">Save List</button><br/>

<textarea id="ciphered" rows="3" placeholder="ciphered"></textarea>
<textarea id="encoded" rows="3" placeholder="encoded"></textarea>
<br/><button onclick="obscure()">Obscure</button><br/>

<textarea id="deciphered" rows="3" placeholder="deciphered"></textarea>
<textarea id="decoded" rows="3" placeholder="decoded"></textarea>
<br/><button onclick="reveal()">Reveal</button><br/>
<br/>
<div id="phrase">The quick brown fox jumped over the lazy dog</div>
<button onclick="generate()">Generate</button><br/>

JavaScript

var words = {};
words.word1 = ["quick", "fast", "slow", "spritely", "overjoyed", "hyperactive", "idiotic"];
words.word2 = ["brown", "purple", "portly", "fat", "skinny", "mottled", "bug eyed"];
words.word3 = ["fox", "kangaroo", "spider monkey", "circus midget", "robot"];
words.word4 = ["jumped over", "poked", "made a sandwich for", "smacked down", "made faces at"];
words.word5 = ["lazy", "angry", "amused", "ugly", "thoroghly annoyed", "depressed"];
words.word6 = ["dog", "baby", "iguana", "martian", "bunny", "Gary Busey"];

function randBetween(min, max) { return Math.floor( Math.random()*max ) + min; }

function getRandomWord (array) { return array[randBetween(0, array.length)]; }

function generate() { document.getElementById("phrase").innerHTML = "The " + getRandomWord(words.word1) + " " + getRandomWord(words.word2) + " " + getRandomWord(words.word3) + " " + getRandomWord(words.word4) + " the " + getRandomWord(words.word5) + " " + getRandomWord(words.word6); }
                                        
function cipherWord(word, index) {
    var cword = "";
    for(var i = 0; i < word.length; i++) {
        cword += cipherLetter(word.split("")[i], i + index);
    }
    return cword;
}

function cipherArray(array, index) {
    var carray = [];
    for(var i = 0; i < array.length; i++) {
        carray.push(cipherWord(array[i], i + index));
    }
    return carray;
}

function cipherLetter(a, index) { 
    return String.fromCharCode( 32 + (a.charCodeAt(0) + index - 32) % 95 );
}

function decipherLetter(a, index) { 
    return String.fromCharCode( 126 - ((126 - a.charCodeAt(0) + index) % 95) );
}

function decipherWord(cword, index) {
    var word = "";
    for(var i = 0; i < cword.length; i++) {
        word += decipherLetter(cword.split("")[i], i + index);
    }
    return word;
}

function decipherArray(carray, index) {
    var array = [];
    for(var i = 0; i < carray.length; i++) {
        array.push(decipherWord(carray[i], i + index));
    }
    return...