Hi friends; going to show you how you can add a live Paragraph, Words and Character counter.

You will have to include Countable.js file. You can download it from here.

<script src="Countable.js"></script>

HTML

<div class="countablepart">
  <textarea cols="70" rows="10" autofocus id="countthis" placeholder="Please write something here"></textarea>
  <table class="result" border="1" cellpadding="5">
    <tr>
      <th>Paragraphs:</th>
      <th>Words:</th>
      <th>Characters:</th>
    </tr>
    <tr>
      <td><span id="paragraph_count">0</span></td>
      <td><span id="word_count">0</span></td>
      <td><span id="char_counter">0</span></td>
    </tr>
  </table>
</div>

SCRIPT

<script>
      var area = document.getElementById('countthis'),
          results = {
            paragraphs: document.getElementById('paragraph_count'),
            words: document.getElementById('word_count'),
            characters: document.getElementById('char_counter')
          }

      new Countable(area, function (counter) {
        if ('textContent' in document.body) {
          results.paragraphs.textContent = counter.paragraphs
          results.words.textContent = counter.words
          results.characters.textContent = counter.characters          
        } else {
          results.paragraphs.innerText = counter.paragraphs
          results.words.innerText = counter.words
          results.characters.innerText = counter.characters
        }
      })
</script>

Output

Thanks and regards 🙂 . Keep Checking.