How to make a word counter with JavaScript🦸‍♂️
Tags: javascript, tutorial
Published: 2020-05-19 16:27:46

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 😉.

```bash
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:
```bash
.
├── 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! 😈

```html
<!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 😉.

```css
* {
  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:
```JavaScript
// 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.
```javascript
// 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.

```javascript
// 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:
```javascript
// 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! 🥳