JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<div class="text"></div>

CSS

body{
    background-color: black;
    color: lime;
    font-family: Arial;
    line-height: 20px;
    letter-spacing: 1px;
}
.text {
    padding: 20px;
}

JavaScript

jQuery( function($){
    var txt = "We take the URL, and remove all non-numeric characters using a regular expression. This gives us the counter value from the client: “/poll/123” becomes simply 123. Then we check whether the messages array is longer than the counter value, and if it is, we will immediately return by using Response.end().Because we are sending data as JSON, we create an object with the count and append properties and encode it into a string using JSON.stringify. This JSON message contains the current count on the server side (which is the same as messages.length) and all the messages starting from count (using the slice function) joined together (with newlines separating the messages).If the count is greater than the current number of messages, then we do not do anything. The client request will remain pending, and we will store the Response object into the clients array using push(). Once this is done, our server goes back to waiting for a new message to arrive, while the client request remains open."
    ,txtarr = txt.split("")
    ,$el = $(".text")
    ,tmr  = 0 ;
    $el.empty();
    tmr = setInterval( function(){
        if( txtarr.length == 0 ){
            clearInterval(tmr);
            $el.text( $el.text().replace("_",""));
        } else {            
            $el.text( $el.text().replace("_","") + txtarr.shift() +"_" );    
        }
    },20);
    
});