JSFiddle - React, Tailwind, and code Playground

by Cwalkdawg

HTML

<input type='button' value='Code/Decode Following Language' onclick='window.validate()' />
<input type='text' name="text" id="text" value='45 Characters Max. (NO NUMBERS!)' />

JavaScript

window.validate = function () {
    var text = document.getElementById("text");
    if (text.value !== "45 Characters Max. (NO NUMBERS!)") {
        if (text.value.length <= 45) {
            text.value = window.xox(text.value);
        }
    }
};

window.xox = function (text) {
    function dxc(text) {
        var coded = "";
        for (var i = 0; i < text.length; i++) {
            coded += stg(text.charAt(i).toLowerCase());
        }
        return ("<==" + coded + "==>");
    }

    function stg(val) {
        var ret = "";
        var key = ["d", "p", "x", "f", "c", "w", "b", "s", "a", "n", "w", "q", "u", "d", "t", "t", " ", "#", "e", "x", "c", "p", "q", "i", "f", "a", "z", "r", "j", "b", "g", "e", "h", "l", "i", "g", "k", "z", "n", "h", "s", "u", "", "y", "k", "o", "v", "m", "y", "l", "o", "v", "m", "t", "j", "!", "|", ",", "$", ".", "*", "1", "2", "3", "4", "5", "6", "7", "8", "9", "?"];

        var code = ["p", "d", "f", "x", "w", "c", "s", "b", "n", "a", "q", "w", "d", "u", "r", "r", "#", " ", "x", "e", "p", "c", "i", "q", "a", "f", "r", "z", "b", "j", "e", "g", "l", "h", "g", "i", "z", "k", "h", "n", "u", "s", "", "k", "y", "v", "o", "y", "m", "o", "l", "m", "v", "j", "t", "|", "!", "$", ",", "*", ".", "~@", "~@!", "~*", "~*@", "~*@!", "~**", "~**@", "~**@!", "~***", ":"];
        
        if (code.indexOf(val) !== -1) {
            ret = code[key.indexOf(val)];
        } else {
            ret = val;
        }
        
        return ret;
    }
    return dxc(text);
};