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

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

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>

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;
}

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');

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;
}

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);
});

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);
});

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

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

Blog

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

M. Akbar Nugroho

Join Our Newsletter. No Spam, Only the good stuff.

Related