JSFiddle - React, Tailwind, and code Playground

by Angelo Rogério Rubin

HTML

<label>Insira o texto aqui<label>

<textarea id="Msg" rows="10" cols="50"></textarea>

<p>O texto possui <span id="MsgCount"></span> caracteres.</p>

<button>Calcular Tempo de Leitura do Texto</button>

CSS

* {
    margin:0;
    padding:0;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    }

span {
    padding:5px;
    color:#000;
}

p {  
    padding:5px;
    width:99%;
    }

textarea {
    margin:5px;
    border:1px solid #CCC;
    padding:3px;
    width:95%;
    }

input {
    margin:5px;
    padding:5px;
    border:1px solid #CCC;
    }

label {
    font-size:18px;
    overflow:hidden;
    margin:10px;
    padding:3px;
    width:99%;
    height:auto;
    min-height:300px;
    }

button {
    padding:5px;
    border:1px  solid #CCC;
    margin:5px;
    }

JavaScript

$(document).ready(function(){

    $("button").live("click",function(){
        
        var palavra = $("#MsgCount").html();
        
        if(palavra=="Desabilitado"){
            alert("O campo foi desabilitado por excesso de palavras.");
           }else{
        
            var result = eval(palavra / 3);
            var hora = eval(result / 3600);
            var minuto = (result / 60);
            var horas = parseInt(hora);
            var minutos = parseInt(minuto % 60);
            var segundos = parseInt(result % 60);
            
        alert("Você levará aproximadamente " +horas + " hora(s) " + minutos + " minuto(s) e " + segundos + " segundo(s) para ler este texto.");
    }     
    });
    
    
// INICIO FUNÇÃO CONTADOR CARACTER

    /**
  * Executa a função
  */
 // $(document).ready(function() {
  /**
   * O evento keyup dispara quando uma tecla do teclado é liberado.
   */
  $("#Msg").keyup(function (event) {
   /**
    * Quando o evento keyup é acionado almenta a largura e altura da textarea
    * mudando sua propriedade css
    */
   /*
      $("#Msg").css({width: "342px",
         height: "100px"}); 
      */
   /**
    * Obtem o valor da textarea
    */
   $Msg = $(this).val();
   
   /**
    * Aqui você define o número máximo de caracteres
    */
   var maxText     = 500;
   
   /**
    * Obtem a quantidade de caracteres
    */
   var numChar = $Msg.length;
   
   /**
    * "Exibe" na div somando "um a um" a quantidade de caracteres digitados
    */
   $("#MsgCount").text(numChar);
   
   /**
    * Testa se o total de caracteres é inferior ao permitido
    * Mudando a cor da fonte do div para azul
    */
   if ( numChar < maxText )
   {
    $("#MsgCount").css("color","#0000ff");
   }
   else
   {
    /**
     * Caso chegue no limite alerta
     */
    if ( numChar == maxText)
    {
     alert("Limite de caracteres excedido!\n So e permitido no máximo: " + numChar + " Caracteres");
    }
    else if ( numChar > maxText)
    {
     /**
 ...