Write A Word Counter Form UI To Count Words Using Javascript

Javascript UI counting total words

Here’s a fully working code written in HTML and JavaScript to work with counting numbers of how many words in one big article.

The user interface is written in HTML and jQuery JavaScript framework, this simple program works by pasting your words you want to count, and when clicking on the submit button, it will count all the total numbers of words.

Bonus additional feature for clearing the input text area, which you can do manually by selecting all the text and press delete.

The Code

Explanation of the code

<texatea>

To create an HTML form with one single text area field input, to type or copy pasting the words that you want to count.

<button type="submit">

Create a button for handling a submit of a form, or a click when you finish inputting the sentences.

<button type="button" id="clear">

The last button is a clear button when it’s clicked it will empty the area that you input on it. The button has an ID clear and the type of this button is "button" not "submit", so when you click on it, it will not submit the form.

<script>...</script>

A set of JavaScript codes using jQuery to handle when a user submit the form by clicking the submit button, and clear button.

function countWords(str)

We create a function countWords that can be used to process the parameter str, and using Regular expression inside the function to parse the words by spaces and count all the many words that have in it.

str.trim().split(/\s+/)

We use the trim function to remove extra whitespace at the beginning and ending of the sentences, from the parameter str. Then split using Regular expression to split sentences by whitespace.

/s+

The /s+ is a regular expression that will match any whitespaces (whitespaces are: the space, and any other non-printable characters).

str.length

With the split function we now have chunks of arrays of words that we can then use to determine the length of an array, which in this case is the total number of words in sentences.

$('form').on('submit', function(e){...}

This is the block of jQuery code that will handle whenever a user submits a form in a web page, in this case the user will click on the button with type submit.

$('#clear').on('click', function(e){

Now this block is another jQuery code that will handle a button with an ID clear. 

event.preventDefault()

What is event.preventDefault() is to prevent the browser from refreshing the page, tell the browser to not refresh the page when a form is submitted.

var words = $('textarea').val();

Store the value in the text area into variable words.

var total = countWords(words);

Using function countWords we define earlier to store the number of the word on a variable total.

$('#total').text(total);

We set a HTML tag content with an ID total with the variable total in the previous line.

$('textarea').val("");

This line is to clear out or set the HTML Textarea with an empty value.

Counting Word Demo

You can visit the demo of this JavasScript to count words.

 

Next thing to do

In the next feature I’ll try to add two more button undo and redo, which seems to be not very hard to implement but I don’t have time for now to develop that feature.

I love writing UI with JavaScript and jQuery, it’s such a pleasure to do HTML document manipulation with a simple and easy to understand syntax.

Even though the future may not be good for jQuery, because it’s capable only of doing small projects, but when projects get bigger, it’s getting harder to maintain the code. I have experienced it myself, but for small projects like this, it is much faster using JavaScript and jQuery.


Comments

Popular posts from this blog

ASUS Battery Health Charging Software To Make Your Battery Life Longer

Flutter AppBar, With Icon, Title and Actions Link

Flutter Button With Left Align Text and Icon

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

How To Create Spring Boot Project Using Netbeans