Word and Character Counter in Javascript

Hello friends, Today in this blog I will show you how to create word and character counters using JavaScript. I have created a blog on other cool stuff about web designing & development. Earlier, you learned to Create a Responsive Landing Page.

Word & Character counter is a tool that will show you the exact number of words & characters respectively of certain input fields. This will help you a lot while writing essays and articles. Today I’m going to create a word and character counter using only JavaScript.

Before writing Javascript code let’s start with the designing part. First, create one ‘textarea’ where you can type anything you want and two different divs to show the output number of words and characters. After that you will observe the following output:-

As you just saw in the image, the UI is not good-looking and user-friendly. So, for making its UI eye-catching we have to add some CSS. I will provide CSS code in the last part of this blog. After applying CSS, our UI looks like this:-

That’s all we have to do in the designing part. Now let’s move towards the main and important part where we add functionality for counting words and characters using Javascript programming language. At first, we will select one input field and two output fields using ‘ID’ and store them in three different variables. Then we will create an ‘Input’ function which will observe if the user types anything inside the textarea. If it found some texts then it will count the words and letters ignoring white spaces. While counting the letters we have to make sure that white spaces are not counting. For that, we will replace all the whitespaces by using the below code.

char.replace(/\s/g, '');

If you’re feeling difficult to understand what I am saying. You can watch a video preview of this program (Word and Character Counter using JavaScript).

Video Preview of Word & Character Counter using Javascript

All this design is based on CSS only and counting functionality is based on JavaScript. If you’re a beginner you can also create this type of counter. If you like this program (Word and Character Counter using JavaScript) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Word and Character Counter using JavaScript [Source Codes]

To create this program (Word and Character Counter using JavaScript). First, you need to create three Files one HTML File, one CSS File, and one JavaScript file. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>JavaScript Word Counter</title>
</head>

<body>
    <div class="main">
        <form>
            <removethis-textarea id="input" oninput="counter()"></removethis-textarea>
        </form>
        <div id="counts">Total Characters: <span id="characters">0</span></div>
        <div id="counts">Total Words: <span id="word">0</span></div>
    </div>
    <script src="counter.js"></script>
</body>

</html>

Note: I have added some unnecessary text in <textarea></textarea> tag so please remove that after pasting code.

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #118bd1;
}
.main form textarea{
    height: 300px;
    width: 400px;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    outline: none;
    border: none;
    padding: 10px;
    resize: none;
    font-family: verdana, sans-serif;
}

/* Hide scrollbar for Chrome, Safari and Opera */
textarea::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
textarea {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.main #counts{
    margin-top: 20px;
    font-size: 30px;
    font-family: verdana, sans-serif;
    color: #eeff00;
}

At last, create a JavaScript file with the name counter.js and paste the given code into your JS file. Remember, you’ve to create a file with a .js extension.

JavaScript

const input = document.getElementById('input');
const characters = document.getElementById('characters');
const word = document.getElementById('word');

function counter() {
    var char = input.value;
    var chartrim = char.replace(/\s/g, '');
    var chartrimmed = chartrim.length;
    characters.innerHTML = chartrimmed;

    var words = input.value.split(' ').filter((item) => {
        return item != '';
    });
    word.innerHTML = words.length;
}

That’s all, now you’ve successfully created a word and character counter using JavaScript. If your code does not work or you’ve faced any errors/problems then please comment down your queries. If you feel this article had helped you, please share it with your friends. If you have any suggestions for me please mention them in the comment below.

You Might Also Like

Video Preview of Word & Character Counter using Javascript

Word and Character Counter using JavaScript [Source Codes]

HTML

CSS

JavaScript

Thank You :)

Post a Comment

Post a Comment

About Us

Contact Form