How to create a basic word counter machine in JavaScript

Overview

In this shot, we create a basic words counter machine using HTML, CSS, and JavaScript (JS), with a focus on JS. Here's what we'll learn:

  • Manipulating HTML with JS
  • Functional programming (FP) in JS

Let's get started!

The markup and style

We need some markup and styles before working with JS. In the widget below, we can use either the HTML tab to view HTML code or the CSS one for CSS code.

We have a title and a text area that will receive the text to count. Now that we have our markup, it's time to use JS.

Adding JavaScript

To work with JS, we will follow functional programming. It is a process of building software by using only pure functions. These four functions are the backbone of our word counter machine:

  • renderText(): This displays text on the screen.
  • handleWord(): This counts words.
  • handleChar(): This counts characters.
  • init(): This initiates the program.

Let's implement each function.

Count

This is the most important feature of our app. We have two functions to count words and characters. To count words, we will pass a sentence to the function and get the number of words in return.

In a given sentence, we'll assume that spaces delimit words. So, we can use split() to create an array of words.

function handleWord(text) {
    const textArr = text.split(" ");
}

Now that we have an array, we can loop over it and count the number of words, excluding symbols and other special characters. Within our function, let's add the code below.

let wordCount = 0;
for(word of textArr) {
    if(/[a-zA-Z0-9]/.test(word))
        wordCount += 1;
}

We initiate a variable to keep track of word count while looping with for ... of on textArr. To make sure we only count words, we use a regular expression on line 4.

To count the characters, we only use the length property on the text passed as a parameter to the handleChar() function.

Display count and initialize

To render the count result on the screen, renderText() needs two things:

  • The place to render on the screen (the where)
  • The thing to render (the what)

These two elements will pass as parameters to the function. To write the text on the HTML document, we use the innerText property.

function renderText(domElt, text) {
    domElt.innerText = text;
}

Everything is almost there. Let's now initialize the program.

In the init() function, let's first select the element we'll be interacting with.

function init() {
  // DOM elements
  const textArea = document.querySelector('textarea')
  const wordDOM = document.querySelector('#wordNum')
  const charDOM = document.querySelector('#charNum')
}

To select an HTML element, we use the querySelector() method whose syntax is as follows:

querySelector(selector)

Note: The selector is any CSS selector.

We need an event handler to detect when the user types words. The method to use is addEventListner(). The syntax is as follows:

target.addEventListener(event, function)
  • target: This is the element we wish to add our event handler to.
  • event: This is the name of the event (input, click, etc.).
  • function: This is the function to run when the event is detected.

Considering all these, the init() looks like this:

function init() {
  // DOM elements go here
  
  textArea.addEventListener("input", event => {
        const text = event.target.value.trim();
        
        // Get word count and char count, and render them
        renderText(wordDOM, handleWord(text));
        renderText(charDOM, handleChar(text));       
    });
}

Explanation

  • Line 4: In the input event, we detect the change in the text area.
  • Line 5: We store the text in the text area in a variable called text.
  • Lines 8–9: We display the result on the screen.

That's all. We can now put it all together and run the code.

Counter machine in JS

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)