JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<textarea id="cipher">QIGC-YLKQDQRIKR INTPRDLKQ DKYGTSDKA IWYBPKAI PKS YLOOIGPRDLK ICCIYRQ
QDHA-EJSDPWRSEKJ RKPPDRSEKJ SK LDJQESY-ATJRSEKJWH WMMPKXEIWSEKJQ AKP IWJY-DHDRSPKJ QYQSDIQ
IMJQHN OPTPY JF PVY YDYEPMJH ITO WX T OPJEVTOPAE GYPVJN</textarea>
<button id="cmd-caesar">Check Caesar</button>
<button id="cmd-frequencies">Frequencies</button>
<div id="output"></div>
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
        <td>K</td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
        <td>P</td>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
        <td>U</td>
        <td>V</td>
        <td>W</td>
        <td>X</td>
        <td>Y</td>
        <td>Z</td>
    </tr>
    <tr>
        <td>
            <input id="A" type="text" />
        </td>
        <td>
            <input id="B" type="text" />
        </td>
        <td>
            <input id="C" type="text" />
        </td>
        <td>
            <input id="D" type="text" />
        </td>
        <td>
            <input id="E" type="text" />
        </td>
        <td>
            <input id="F" type="text" />
        </td>
        <td>
            <input id="G" type="text" />
        </td>
        <td>
            <input id="H" type="text" />
        </td>
        <td>
            <input id="I" type="text" />
        </td>
        <td>
            <input id="J" type="text" />
        </td>
        <td>
            <input id="K" type="text" />
        </td>
        <td>
            <input id="L" type="text" />
        </td>
        <td>
            <input id="M" type="text" />
        </td>
        <td>
            <input id="N" type="text" />
        </td>
        <td>
            <input id="O" type="text" />
        </td>
        <td>
            <input id="P" type="text" />
        </td>
       ...

CSS

* {
    font-family: courier new;
}
textarea {
    width: 100%;
    height: 100px;
}
p {
    margin: 1px;
}
input[type=text] {
    width: 15px;
    padding-left: 3px;
}
td {
    text-align: center;
}
input[type=text].key {
    width:100px;
}

JavaScript

/**
    Cipher Cracker
*/

var output = document.getElementById("output");

var clearOutput = function () {
    while (output.firstChild) {
        output.removeChild(output.firstChild);
    }
};

var writeOutput = function (value) {
    var p = document.createElement("p");
    var text = document.createTextNode(value);
    p.appendChild(text);
    output.appendChild(p);
};

var caesar = document.getElementById("cmd-caesar");
caesar.addEventListener("click", function () {
    var cipher = document.getElementById("cipher").value;

    clearOutput();
    for (var shift = 1; shift < 26; shift++) {
        var candidate = "";
        for (var i = 0; i < cipher.length; i++) {
            var charCode = cipher.charCodeAt(i);
            if (charCode > 64 && charCode < 91) { // A-Z
                charCode = (charCode - 65 + shift) % 26 + 65;
            }
            candidate += String.fromCharCode(charCode).toLowerCase();
        }

        writeOutput(candidate);
    }
});

var cmdFrequencies = document.getElementById("cmd-frequencies");
cmdFrequencies.addEventListener("click", function () {

    var cipher = document.getElementById("cipher").value;
    var frequencies = [];
    for (var i = 65; i < 91; i++) {
        frequencies.push({
            char: String.fromCharCode(i),
            count: 0
        });
    }

    for (var i = 0; i < cipher.length; i++) {
        var charCode = cipher.charCodeAt(i);
        if (charCode > 64 && charCode < 91) {
            frequencies[charCode - 65].count += 1;
        }
    }

    frequencies.sort(function (a, b) {
        return b.count - a.count;
    });

    var summary = "";
    frequencies.forEach(function (value) {
        summary += value.char + ":" + value.count + ", ";
    });

    clearOutput();
    writeOutput(summary);
});

$("table").find("input").on("keydown", function (e) {
    $(this).val(String.fromCharCode(e.keyCode).toLowerCase());
    showPlainText();
    return e.keyCode === 9;
});

var showPlainText =...