Word and Character Counter Using jQuery

How to create word counter or character counter Using jQuery

 

IMPORT LIBRARIES
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/js/bootstrap.min.js"></script>
<script src="jquery.word-and-character-counter.js"></script>

 

JAVASCRIPT CODE
 $("#wordcount").counter({
    	count: 'up',
    	type: 'word',
  text: false,
  msg: 'Word',
  containerClass: 'wrapper'
});

 

CSS CODE
.wrapper {
    font-size: 12px;
    border: 1px solid green;
    border-radius: 50px;
    width: 120px;
    padding: 10px;
    margin-top:10px;
    font-weight:bolder;
}

 

HTML CODE
<div class="container">
    	<textarea class="form-control" id="wordcount" rows="15"></textarea>
</div>

 

Leave a Reply

Your email address will not be published. Required fields are marked *