Character Counter with HTML and JS

Walter Nascimento
Walter Nascimento | EN
1 min readAug 30, 2020

Create a simple character counting system.

[clique aqui para português]

When we are working with text it is sometimes necessary to know how many characters the text has, or how many words. recently i needed something similar and after using some online tools i thought it would be interesting to create my own character counter, and that is what we are going to do.

CODE

First we will create the interface, we will do something simple, using only HTML.

HTML code

The HTML structure used oninput, an event that is triggered whenever we have a new data entry.

Now let’s create the countText function.

JS code

There, it’s that simple.

Demo

See the complete project working below.

Project on codepen

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

Video on youtube

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊See you! 😊😊

--

--