JSFiddle - React, Tailwind, and code Playground

by csbenjamin

HTML

<textarea id="text" style="width:100%;height:100px">A leitura, que é um testemunho oral da palavra escrita de diversos idiomas, com a invenção da imprensa, tornou-se uma atividade extremamente importante para a civilização, atendendo múltiplas finalidades.</textarea>
<div id="view" style="text-align:center;margin-top:30px;position:relative;">
    <span id="viewText">o texto aparecerá aqui</span>
    <div id="center" class="center"></div>
</div>
<button style="margin-top:30px;" id="read">Read now</button>

CSS

.center{
    background:rgba(200,200,200,0.2);
    width:10px;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    margin-left:-5px;
}

JavaScript

function read(){
    text = document.getElementById("text").value;
    myView = document.getElementById("viewText");
    text = text.replace(/(:? +|\n)/g," ");
    var array = text.split(" ");
    var current = 0;
    function refresh(){
        myView.textContent = array[current]
        current++;
        setTimeout(function(){
            if(array[current]){
                refresh();
            }
        },500)
    }
    refresh();
}

document.getElementById("read").onclick = read;