Words Counter using JavaScript
Published: 2022-09-11 08:42:10

Hello Guys! In this blog, I'm going to explain to you how to make a words counter using javascript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

## **Let's cover HTML Part**
We use HTML to make the skeleton of a website. HTML is a markup language. 


Let's import the fonts using Google Fonts API. Below is the code for the `Poppins` Font. Paste the below code in the `<head>` tag.

```html
<!-- Google Fonts  -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
```

The following HTML code adds the basic structure and simple information of Word Counter Counter.

First, there is the textarea with the id 'message' to enter the text. Next, there is `<p>` tag to display word counter and character count.


```html
<div class="container">
    <h1>Word Counter</h1>
    <textarea name="message" class="message" id="message" cols="50" rows="5" placeholder="Enter a message"
        oninput="updateCount()"></textarea>

    <p>
        <span id="word-count">0</span> words |
        <span id="character-count">0</span> characters
    </p>
</div>
```


## **Here is the final HTML code**

```html
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Word Counter using Javascript - @code.scientist</title>
</head>

<body>
    <div class="container">
        <h1>Word Counter</h1>
        <textarea name="message" class="message" id="message" cols="50" rows="5" placeholder="Enter a message"
            oninput="updateCount()"></textarea>

        <p>
            <span id="word-count">0</span> words |
            <span id="character-count">0</span> characters
        </p>
    </div>
</body>

</html>
```
### **Output Till Now**

![HTML Output of word counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aiz10vp3i2lv96wj426l.png)

## **Let's understand CSS part**
In the below CSS code. 
1. We declare a * selectors for the font Poppins that we have imported in our head tag.
2. We have a container with a deepskyblue border and border-radius to look better. 
3. Next, we have a message that also have a deepskyblue border & border-radius CSS property to enhance UI.


```css
* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid deepskyblue;
    padding: 40px;
    border-radius: 20px;
    width: 30rem;
}

.message {
    border: 2px solid deepskyblue;
    border-radius: 7px;
    padding: 8px;
    margin-top: 4px;
    outline: none;
}
```


![CSS Output of word counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gge0xabac9h88jjygyw2.png)

## **Finally a JavaScript part**

In the below javascript code, we have `updateCount()` arrow function which invokes whenever a user enters text/input in the textarea. 
In `updateCount()` function we have declared message variable and grab the message div element and get the value. Then we have declared wordCount variable and calculate and store the length of message using `.length()` function.
Next, we set the values in the result section using DOM manipulation.

```javascript
const updateCount = () => {
    let message = document.getElementById("message").value;

    let wordCount = (message).split(' ').length

    document.getElementById("word-count").innerText = wordCount;
    document.getElementById("character-count").innerText = message.length;
};
```