DEV Community

M. Akbar Nugroho
M. Akbar Nugroho

Posted on

How to make a word counter with JavaScript🦸‍♂️

Hi, everyone!

Today, I wanna share with you how to make a simple "word counter" application. I will make this short and as clear as possible. So, you can understand it easily 😉.

But, wait. Why I write this post?. I was thinking for the first time I learned JavaScript 😅.

I made a lot of simple projects like this. I thought it's very difficult to understand the flow of the code. So, for that reason, I write this post to help you understand each part of the code.

Let's build it up!

First, let's create a new folder to contain our project. I will name it js-word-counter, but you are free to give it any name as you want 😉.

mkdir js-word-counter
Enter fullscreen mode Exit fullscreen mode

After that, let's make our application interface with HTML and CSS.

Under the js-word-counter (or whatever the name you have given 😆) create an HTML file called index.html and a CSS file called style.css.

Your folder structure should look like this:

.
├── index.html
└── style.css
Enter fullscreen mode Exit fullscreen mode

Now, let's write the HTML code first!

Open the index.html file with your favorite code editor. In this tutorial, I use the Visual Studio Code.

Write this code down. Don't copy-paste it or I'll eat you! 😈

<!DOCTYPE html>
<html>
<head>
  <!-- Meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A simple word counter with JavaScript">

  <!-- Style -->
  <link rel="stylesheet" href="style.css">

  <!-- Title -->
  <title>JS Word Counter</title>
</head>
<body>
  <main>
    <section>
      <h1>JS Word Counter</h1>
      <form>
        <textarea
          cols="30"
          rows="13"
          placeholder="Write something awesome..."
        ></textarea>
      </form>
      <div>
        <strong>words:</strong>
        <span id="word_count">0</span>
      </div>
    </section>
  </main>

  <!-- JavaScript -->
  <script src="main.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Save the code and now open the style.css file. Write this code down and don't forget to don't copy-paste it 😉.

* {
  box-sizing: border-box;
}

html,
body {
  margin: auto;
  padding: auto;
  font-family: arial;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100vh;
}

section {
  align-self: center;
  display: flex;
  flex-direction: column;
  padding: 1em;
  width: 50%;
  height: 50vh;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

h1 {
  color: #673AB7;
}

textarea {
  border: none;
  width: 100%;
}

textarea:focus {
  outline: none;
}

textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

#word_count {
  color: #E91E63;
}
Enter fullscreen mode Exit fullscreen mode

Alright, we are on the final step!

Let's write our JavaScript code...

First, let's define the DOM element that we need. We need this element to get the text that the user typed and display the total words which have been typed.

Create a JavaScript file called main.js and inside it write this code:

// DOM elements
const textareaEl = document.querySelector('textarea');
const wordCounterEl = document.querySelector('#word_count');
Enter fullscreen mode Exit fullscreen mode

Great! Now we need to make two function to take the value of textarea element to calculate the total words and display the total words to the total words placeholder element.

// Get the value of textarea
// and calculate the total word
const getTotalWord = (element) => {
  let text = element.value;
  let totalWord = text.split(' ').length;

  return text === '' ? 0 : totalWord;
}

// Update the word counter element
const setWordCounter = (element, value) => {
  element.textContent = value;
}
Enter fullscreen mode Exit fullscreen mode

And the last, let's add an event listener to calculate the total words and display it to the screen when the user is typing.

// Fire this function when the user is typing
textareaEl.addEventListener('keyup', () => {
  let totalWord = getTotalWord(textareaEl);
  setWordCounter(wordCounterEl, totalWord);
});
Enter fullscreen mode Exit fullscreen mode

The whole JavaScript code should look like this:

// DOM element
const textareaEl = document.querySelector('textarea');
const wordCounterEl = document.querySelector('#word_count');

// Get the value of textarea
// and calculate the total word
const getTotalWord = (element) => {
  let text = element.value;
  let totalWord = text.split(' ').length;

  return text === '' ? 0 : totalWord;
}

// Update the word counter element
const setWordCounter = (element, value) => {
  element.textContent = value;
} 

// Fire this function when the user is typing
textareaEl.addEventListener('keyup', () => {
  let totalWord = getTotalWord(textareaEl);
  setWordCounter(wordCounterEl, totalWord);
});
Enter fullscreen mode Exit fullscreen mode

Now open the index.html file on the browser and test it yourself

Yay! You have successfully made a simple word counter with JavaScript! 🥳

Top comments (3)

Collapse
 
phata83 profile image
MOUHAMADOU Sow

Hello this is great your word counter but the only problem is that it counts spaces as words.
Let's take the following sentence as an example:
"This is a word counter"
This sentence has 6 words but it will put 12 words because there are extra spaces.
How can we fix this?

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli

I haven't tried the full code, but from what I can see it specifically doesn't count spaces.

The part of the code that does the counting:

let totalWord = text.split(' ').length;
Enter fullscreen mode Exit fullscreen mode

If you replace text with 'This is a word counter' then you get the correct answer of 5.

Collapse
 
philips_salt_2e560e0fbb64 profile image
philips salt

Hey there!
That is very helpful and working information about how to make word counter. Thanks for posting a bundle of knowledge. I appreciate it.