JSFiddle - React, Tailwind, and code Playground

by Elguja Bogveradze

HTML

<div id="decode">
    <div id="decoded"></div>
    <div id="decoding"></div>
</div>

CSS

#decode div {
    background:black;
    height:20px;
    float:left;
    color:green;
    font-weight:bold
}
#decoding {
    text-decoration: underline;
    color:red;
}

JavaScript

var code = "x42zt2zx";

decode = function decode(code, speed) {
    speed = typeof speed == "undefined" ? 1000 : speed;
    var l = code.length;
    var i = 0;
    var n = 0;
    var next = 0;
    var eng = ["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", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
    x = 0;
    
    afterinterval = setInterval(function () {
        if((next+1) >= eng.length){next=0;}else{next++;}
                
        if (x < Math.floor(speed/200)) {
            $("#decoding").html(eng[next]);
            x++;
        }
    }, 200);
    setInterval(function () {
        clearInterval(afterinterval);
        if (i < l) {var next = 0 ;
            var html = $("#decoded").html();



            $("#decoded").html(html + code[i]);
            i++;
            if (i == l) {
                n = 1;
                $("#decoding").html("");
            }

            setInterval(function () {
                if((next+1) >= eng.length){next=0;}else{next++;}
                
                if (n === 0) {
                    $("#decoding").html(eng[next]);
                }
            }, 200);


        }

    }, speed);
};

decode(code, 50000);