JSFiddle - React, Tailwind, and code Playground

by Elguja Bogveradze

HTML

<div id="scrollbox">
    <div id="textscroll"></div>
    <div id="bottom"></div>
</div>

CSS

#scrollbox
{     font-family: monospace;
    position:absolute;
    display:blcok;
    width:500px;
    height:500px;
    background-color:black;
    border:1px solid grey;
}
#textscroll{
color:lime;
}
#bottom {
    
    position:relative;
    bottom:0;
    height:32px;
font-weight:bold;
    color:lime;
   
}

JavaScript

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"];
    var some = ["·","¨","…","¦","┅","┆","┈","┊","╱","╲","╳","¯","–","—","≡","჻","░","▒","▓","▤","▥","▦","▧","▨","▩","█","▌","▐","▀","▄"];
var string = ["[abc123@funkmachine ~]$ sftp [email protected]","Connecting to lionxi.rcc.psu.edu...","abc123@lionxi's password: password","sftp> pwd","Remote working directory: /gpfs/home/jwh128","sftp> lpwd","Local working directory: /home/jwh128","sftp> cd work/depot","sftp> pwd","Remote working directory: /gpfs/work/jwh128/depot","sftp> lcd results","sftp> lpwd","Local working directory: /home/jwh128/results","sftp> ls -l","-rw-r--r--    1 root     root            5 Mar  3 12:08 dump","sftp> lls -l","total 0","sftp> get dump","Fetching /gpfs/work/jwh128/depot/dump to dump","/gpfs/work/jwh128/depot/dump        100%    5     0.0KB/s   0.0KB/s   00:00    ","sftp> lls -l","total 4","-rw-r--r-- 1 jwh128 jwh128 5 Mar  3 12:09 dump","sftp>"];
var n = 0;
setInterval(function () {
if(n<24)
{
    $("#textscroll").html($("#textscroll").html()+string[n]+"<br>");
n++;
}
},400);


    setInterval(function () {
if(n<24)
{
        var text = '';
        for (I = 0; I <= 45; I++) {
            var num = Math.floor(Math.random() * 10);
            var rand = Math.floor(Math.random() * 61);
            var somes = Math.floor(Math.random() * 30);
            if (num >= 1) {
                text += eng[rand];
            } else {
                text += some[somes];
            }
        }

        $("#bottom").html(text);
}else{$("#bottom").html("");}}, 200);