Tutorial: A Character Count Tool Using Bootstrap and JavaScript

This week I want to document how I created a simple web application that allows users to input a message, and in return display the number of characters in it. Not only was it simple to make, but useful in the real world too!

For this project, we will be using Bootstrap for the user interface, and basic JavaScript for the character counting functionality. To get started, download the compiled and minified version of Bootstrap from the official website.

Getting Started

To kickstart our project, we will be using the “Starter template” from Bootstrap as it is easy to configure and readily available. According to Bootstrap, the template contains “nothing but the basics: compiled CSS and JavaScript along with a container”. It’s true! You’ll see soon.

To download the starter template, click onto the Starter template URL above, and with the mouse, right click, “View Page Source” (on Google Chrome and Mozilla Firefox, other browsers should be similar). Copy the whole text and paste that onto a new file called charCounter.html (or anything you like — for example, index.html).

With Bootstrap downloaded and charCounter.html created, your file directory should look something like this (not exactly the same, but the structure should be identical — 3 folders and 1 file). Note: charCounter.html is inside the root directory, and not part of any folders.

Let’s make it even better! Let’s add a text box so that users can input messages, and a button to calculate the number of characters they entered.

This is where Bootstrap comes in and becomes super useful. Bootstrap allows us to create visual elements (text box, buttons, labels, forms) extremely easily, and also make them responsive so that they are user friendly for different devices (smartphones, tablets, laptops, desktops).

Using Bootstrap, let’s add a text box first. Insert this code to the bottom of the paragraph tag (below </p>) but before the two </div> tags:

Here, we created a function called clickEvent, which is called when our button is clicked (if you remember, we declared in HTML: <button type=”button” id=”submitButton” class=”btn btn-primary btn-lg” onclick=”clickEvent()”>Calculate</button>).

In //1, we read in the message that was entered into the text box we created earlier (note: method getElementById returns a reference to what is identified with the specified ID — in our case inputMessage. .value returns the value (text) contained in the text box), and stores that inside inputText.

In //2, we make sure that newlines in user’s inputs are not considered as characters when parsing the message. This happens because when a string is read in a system, newlines are represented in code as either \r\n, \n, or \r, and thus are considered as characters. We don’t want that, so we want to make sure that when any of the above are seen, we replace them with “”.

Visually explained, this line should yield a result of 4 total characters and not 5, which it does:

50
50

(50\n50 is parsed into 5050, which is 4 characters)

Midway into the function, I also added an alert box which you can see in //3. It is just a quick way I used to check my results. Console.log() (and many other methods) may also work, whatever is most comfortable with you.

At last, in //4, I changed the value of the resultBox label to show the return value of the .length method on the parsed inputText.

You may have noticed that in //1, I used.value to access the data stored in the text box, but in //4, I used .innerHTML. There is a reason for that: generally, .value is used for input/form elements, whereas .innerHTML is used for any object that can contain HTML (divs, spans, and similar elements).

And there it is!

A fully functional character count tool that can calculate the number of characters in any user-generated message!

I am a senior at Wake Forest University currently pursuing my BS in Computer Science, and I love technology! To learn a little more about me, please visit the "Meet Kevin" widget on the top right on the screen!

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

Comment

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Search for:

Meet Kevin

I work as a software engineer for Qualtrics in Seattle. I love technology, and that's why I decided to start this blog during college to share my troubles and successes with the folks of the Internet. Outside of work, I love to play and watch soccer. Occasionally, I also enjoy playing DotA 2 and FIFA online with my friends.