/ JavaScript

Calcular el Tiempo de Lectura Estimado Con la Librería JS Reading Time

Que genial poder implementar el tiempo que tomaría leer un artículo que publiquemos verdad, bueno eso ya no es más un problema gracias a la librería JavaScript Reading Time, que nos permite calcular el tiempo estimado de lectura.

También quiero dar a conocer que esta librería funciona conjuntamente con jQuery.

Librerías

Vamos a necesitar un par de librerías para lograr esta tarea.

Lo que nos queda por hacer es realizar un ejemplo de uso de esta maravillosa librería gratuita, escrita en JavaScript.

Implementación de Reading Time

Realizaremos una implementación básica de la librería Reading Time para poder entender mejor de lo que se trata.

HTML

<!DOCTYPE html>
<html lang="es-PE">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo - Reading Time</title>
    <style>
        body,
        html{
        font-size: 25px;
        margin:  0 auto;
        width: 80%;
        }
        .reading-time{
        background: #3BD07E;
        font-size: 1.2rem;
        padding: 1rem;
        }
        .tiempo-lectura{
        color: #000;
        font-weight: 700;
        }
    </style>
  </head>
<body>
  <article>
    <div class="reading-time">
    <p><span class="tiempo-lectura"></span> (<span class="cantidad-palabras"></span> Palabras)</p>
    </div>
    <h2>¿Qué es Lorem Ipsum?</h2>
    <p>
      Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
    </p>
  </article>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/readingtime.min.js"></script>
  <!--Inserta el script aquí-->
</body>
</html>

Código JavaScript

<script>
  //Ver más opciones: https://github.com/michael-lynch/reading-time#user-content-options

  /**
   * Función de la librería Reading Time
   * 
   * readingTimeTarget: Contenedor del tiempo de lectura
   * wordCountTarget: Contenedor del número de palabras
   * wordsPerMinute: Número de palabras que hacen un minuto
   * lang: Lenguaje
   */
  $('article').readingTime({
    readingTimeTarget: $('.tiempo-lectura'),
    wordCountTarget: $('.cantidad-palabras'),
    wordsPerMinute: 200,
    lang: 'es'
  });
</script>

Demo

Demo Reading Time

Espero que te haya gustado este artículo.

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más