Analyzing user input with Countable.js

With Countable.js you can count in real time what your user enters into a text field. No matter if it is about counting characters, words or paragraphs.

Good news first: There is a live demo available.
But let’s build something on our own with it

Download the library from https://github.com/RadLikeWhoa/Countable/archive/master.zip 
Or install it via npm:
npm install countable

<textarea id=”text”></textarea><script>
  Countable.count(document.getElementById(‘text’), counter =>
    console.log(counter)
  )
</script>

Now you should see:

{paragraphs: 0, sentences: 0, words: 0, characters: 0, all: 0}

With the Countable.count function we get the current state of our text field. But if we change anything in it now, the function will not be called again.

The triggering at every change of the content of the text field can be achieved by the Countable.on function

Countable.on(document.getElementById(‘text’), counter =>
  console.log(counter)
)

Whenever we now change the input, there will be a new console.log

Not difficult at all and not unnecessarily complex I find. 
Therefore gzipped & minified only 1kB large 🙂

Related posts:

Reliable data validation with xtype.js What are callbacks? How To Easily Clone Es6 Object Cloning By Doing Less SuperTokens