JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="number">

</div>
<div id="article">
<h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean condimentum urna eget justo iaculis, sit amet imperdiet nulla suscipit. Donec sit amet sem felis. Sed a interdum lacus, non consectetur dui. Aenean blandit mi risus, nec semper est dignissim a. Duis sed diam ut augue pharetra accumsan. </p>

<p>Ut porttitor viverra cursus. In porta odio a est hendrerit, eu tristique purus varius. Nam eget ultrices libero. Proin sed quam eget eros placerat consequat. Cras a nulla eros. Proin sollicitudin sollicitudin ex nec feugiat. Mauris ornare vitae turpis vel facilisis. Pellentesque iaculis nibh sed tortor ullamcorper vestibulum. Nunc eget dignissim ligula. Mauris gravida est risus, ut sagittis quam ultrices ullamcorper. Nam a auctor nibh. Vestibulum a sem vel urna euismod sagittis. Nullam eu metus sit amet ante mattis fringilla quis eu leo. Vivamus scelerisque placerat erat, in sagittis est consectetur ultrices. Vivamus vitae sem viverra, venenatis tortor quis, laoreet velit. Nunc tempus ultricies pulvinar.</p>

<p>Fusce malesuada nisl sed libero condimentum tristique non in turpis. Nullam porta lacus a orci ultrices finibus. Donec in nibh nisi. Ut eu odio vel diam venenatis congue a a enim. Pellentesque a nulla augue. Proin gravida, libero et placerat pretium, tortor tellus laoreet arcu, at imperdiet magna turpis vel dolor. Donec non odio lacinia, finibus ante a, fringilla lacus. Morbi at tortor eu ipsum viverra interdum tempor fermentum libero. Vivamus aliquet id felis vel mattis. Proin rutrum, nibh nec tempor tristique, nulla erat sodales tortor, ac imperdiet tellus enim et ante.</p>

<p>Sed efficitur, leo sit amet vestibulum consectetur, enim tellus ullamcorper purus, quis feugiat magna arcu quis ligula. Vestibulum id commodo diam. Mauris vulputate orci sit amet nisl tincidunt volutpat. Aliquam laoreet dolor nunc, ut vulputate quam pretium eget. Nunc id tempus odio. Duis volutpat metus...

JavaScript

function countWords(){
var article = document.getElementById("article");
var number = document.getElementById("number");

  
    // Select all the p elements in the page.
    var paragraphs = article.getElementsByTagName("p");
  
    // The counter.
    var count = 0;
  
    for(var i = 0; i < paragraphs.length; i++)
    {
        // Split the innerHtml of the current paragraph to count the words.
        count += paragraphs[i].innerHTML.split(' ').length;
    }
    
        // Select all the h2 elements in the page.
    var h2 = article.getElementsByTagName("h2");
  
    // The counter.
    var count2 = 0;
  
    for(var i = 0; i < h2.length; i++)
    {
        // Split the innerHtml of the current paragraph to count the words.
        count2 += h2[i].innerHTML.split(' ').length;
    }
    
  var newcount = (count + count2);  
  
  
  var word = (newcount / 200) * 60;
  
  var minutes = Math.floor(word / 60);
  var seconds = word - minutes * 60;
 
if (seconds < 15) { seconds=" "; }
if (seconds > 14) { seconds= (30 + " Seconds"); }
if (seconds > 44) { seconds=" "; minutes = (minutes + 1); }
  
  
   
number.innerHTML = "There are " + newcount +" words.<br>Estimated Read Time: "+minutes+" Minutes "+seconds;
}

countWords();