JavaScript: Countable.js

-

This article is about a very small, rather unknown, 
but a very powerful JavaScript library which will make your life easy without making your web app unnecessarily heavy.
Well, this may be useful in a use case, where you need to show count of words, characters, 
sentences etc to the end-user which he enters into a text field or to store it in a database for some data analyzing kind of thing.

So let's start with some code:

<input type="text" id='usertext'></textarea>
<script>
  Countable.count(document.getElementById('usertext'), 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('usertext'), counter =>
  console.log(counter)
)

Whenever we now change the input, we will get the latest counter value. 

About size: gzipped & minified only 1kB large.



Npm: npm install countable


For more details, check out this.

I hope it was helpful.

Written By:
Saurabh Joshi 

Comments

Post a Comment

Popular posts from this blog

Node JS:Understanding bin in package.json.

-
Image
Well as a Node Js developer we know package.json as dependency file where we keep a note of all dependencies of our project. Here we will be looking at what is bin in package.json? To understand this we first need to understand command line application and it's purpose. CLI applications are mostly used to automate things such as deployments of application,running tests,building reports and the list goes on and on. So lets start with creating our first CLI application. First, let’s make sure you have the tools required. To complete this tutorial, you will need the following: 1)A recent version of Node.js downloaded and installed 2)A good text editor, such as Visual Studio Code Next, open your computer’s command prompt (Windows) or terminal (macOS/Linux). Change the current directory to the folder where you save your documents or projects. Enter the following commands to create a new project folder and initialize the project. mkdir hello-cli cd hello-cli npm init Nex
Read more

Node.js: create an excel file with multiple tabs.

-
Image
This article is a sample code to generate an excel file with multiple tabs using  excel4node  module. Install: npm i excel4node Let's see the sample code, var excel = require( 'excel4node' ); // Create a new instance of a Workbook class var workbook = new excel.Workbook(); // Add Worksheets to the workbook var worksheet = workbook.addWorksheet( 'Buy order types' ); var worksheet1 = workbook.addWorksheet( 'Sell order types' ); // Style for headers var style = workbook.createStyle({ font : { color : '#EA3A14' , size : 18 }, numberFormat : '$#,##0.00; ($#,##0.00); -' }); var styleForData = workbook.createStyle({ font : { color : '#47180E' , size : 12 }, alignment : { wrapText : true , horizontal : 'center' , }, numberFormat : '$#,##0.00; ($#,##0.00); -' }); let buyOrderTypes = [ {name : "buy" ,id : "1" ,comment : "Normal
Read more

Node.js: Downloading a xml file from given url and reading its data elements.

-
Image
In this article, we will see how we can download an XML file from a given URL and then access its elements. This can be used in many cases, for example, scraping data from a site which has data in the XML file or multiple files. The article is pretty short and most of it is just self-explanatory code. Also nowadays, you can get a lot of freelance jobs in data scrapping as data is the new oil today so this might be helpful. So let's begin with the code, var fs = require('fs') var https = require('https');//For accessing https url we need this module instead of http. var xml2js = require('xml2js');//Required for xml parsing. var file_name = 'data.xml'//This will be the name of file we will be generating. var DOWNLOAD_DIR =__dirname+'/'; //This function reads data from URL and writes data into new file //with respect to the given name and directory path. function download(){  var file_url='https://www.w3schools.com/xml/n
Read more