JSFiddle - React, Tailwind, and code Playground

by zumwalt

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<h3>Reading time is about <span class="reading-time"></span></h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et tortor lacus. Cras vel lacus eu urna malesuada aliquet. In sed nisl eget lorem feugiat rhoncus nec sodales purus. Ut non quam non quam ultricies blandit non in risus. Mauris eu dui at odio tincidunt vestibulum. Suspendisse turpis orci, aliquam nec bibendum nec, lacinia vel justo. Donec congue massa dui, a aliquet quam. Nam elementum, enim nec semper egestas, lacus ipsum molestie mi, ac aliquet libero mauris ut massa. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ornare pellentesque felis, sed suscipit orci facilisis vitae. Sed eu ante eget nibh blandit auctor. Sed libero felis, sollicitudin eget vehicula in, sodales sit amet velit. Cras aliquet tellus at erat dignissim gravida et a nulla. Vivamus quis lectus in ipsum sodales mollis in eget purus. Mauris volutpat tortor nec tellus facilisis ac feugiat ipsum ornare.</p>

<p>Sed vehicula sollicitudin sapien eu facilisis. Suspendisse potenti. Sed scelerisque, mi id tristique semper, erat quam imperdiet tortor, sit amet tincidunt turpis eros eget nulla. Quisque malesuada mauris nec turpis interdum tincidunt. Pellentesque placerat, felis eget vestibulum pretium, nulla turpis scelerisque libero, non dapibus velit neque at lectus. Mauris fringilla magna et diam auctor eu accumsan turpis posuere. Nam quis orci nec neque sollicitudin semper bibendum in odio. Aenean suscipit ornare odio, sit amet tincidunt justo sodales ut. Cras hendrerit bibendum malesuada. Maecenas et sapien lacus. Praesent tincidunt consequat lobortis.</p>

<p>Proin enim orci, aliquet quis sagittis non, commodo vel turpis. Donec luctus, arcu ut congue consectetur, nibh tortor interdum justo, sit...

CSS

h3 {
  font-size: 2em;        
}

.content p {
    font-family: 'helvetica neue', helvetica, sans-serif;        
    margin: 0 0 15px;                    
}

JavaScript

//You need an anonymous function to wrap around your function to avoid conflict
(function($){
 
    //Attach this new method to jQuery
    $.fn.extend({ 
         
        //This is where you write your plugin's name
        readingtime: function(options) { 
            
            var defaults = {
                renderTo: '.reading-time',
                wpm: 250            
                }
                
            var options =  $.extend(defaults, options);
 
            //Iterate over the current set of matched elements
            return this.each(function() {
                var o = options,
                    container = o.renderTo,
                    wordCount = $(this).text().split(/\s+/).length,
                    readingTime = Math.round(parseInt(wordCount, 10) / o.wpm);
            
                container.text(readingTime+' minutes');
            });
        }
    });
     
//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);

$(document).ready(function(){
    $('.content').readingtime();
});