JavaScript Character Counter

Why Add a Character Counter?

A character counter provides immediate feedback to the user. It answers the question, "How much have I written?" This is particularly useful in AI applications where API calls might have character limits or where performance depends on the input size.

Here's what a character counter looks like in action:

Let's dive in and add this to our project.

Step 1: Update the HTML to Display the Count

First, we need a place in our HTML file to show the character count. The logical spot is right below the main text area. We will add a simple <div> element for this purpose.

Open your index.html file and find the <textarea> with the ID main-text-input. Add the new div right after it, like this:

<!-- ... inside your <body> tag ... -->

<div class="container">
    <h1>AI Writing Assistant</h1>
    
    <textarea id="main-text-input" placeholder="Enter your text here..."></textarea>
    
    <!-- NEW: Add this div for the character counter -->
    <div id="char-counter"></div>

    <div class="tabs">
        <!-- ... your tab buttons ... -->
    </div>
    
    <!-- ... the rest of your HTML ... -->
</div>

We've added a div with the ID char-counter. For now, it's empty. We will populate and update it using JavaScript.

Step 2: The JavaScript Logic for Real-Time Updates

The core of this feature is JavaScript. We need to listen for changes in the text area, count the characters, and update our new div. The best way to learn this is by seeing it built step-by-step.

The following video from the dcode channel provides an excellent walkthrough.

Step 3: Integrating the Code into Our Project

Now that you've seen the concepts in the video, let's apply them to our script.js file. We will write code to:

1. Define a maximum character limit.
2. Select our text area and the new counter div.
3. Add an input event listener to the text area.
4. Inside the listener, calculate the remaining characters and update the counter's text.

Add the following code inside the DOMContentLoaded event listener in your script.js file. You can place it near the top, with your other element selections.

// --- Start of Character Counter Feature ---

// 1. Define the maximum number of characters allowed.
const MAX_CHARS = 5000;

// 2. Select the elements from the DOM.
const mainTextInput = document.getElementById('main-text-input');
const charCounter = document.getElementById('char-counter');

// 3. Set the initial text of the counter.
charCounter.textContent = `${MAX_CHARS} characters remaining`;

// 4. Add an event listener that triggers on every input change.
mainTextInput.addEventListener('input', () => {
    const currentLength = mainTextInput.value.length;
    const remainingChars = MAX_CHARS - currentLength;

    // 5. Update the counter's text.
    charCounter.textContent = `${remainingChars} characters remaining`;
});

Code Breakdown:

• MAX_CHARS: We set a constant for the character limit. This makes it easy to change later.
• We select the textarea and our new char-counter div using their IDs.
• We set the initial text so the user knows the limit before they even start typing.
• The addEventListener('input', ...) is the key. The function inside it runs every single time the user changes the content of the text area.
• Inside the listener, we get the current number of characters with mainTextInput.value.length.
• Finally, we update the textContent of our counter div with a new string showing the remaining characters.

Optional Enhancement: Adding Color Feedback

Good UI design gives users subtle clues. Let's make the counter turn red when the user is close to the character limit. This provides a helpful warning. The video we watched shows a great way to do this.

Let's update our event listener to include this logic. We'll make the text red if the remaining characters are 10% or less of the maximum.

// --- Updated 'input' event listener ---

mainTextInput.addEventListener('input', () => {
    const currentLength = mainTextInput.value.length;
    const remainingChars = MAX_CHARS - currentLength;

    charCounter.textContent = `${remainingChars} characters remaining`;

    // NEW: Add color-changing logic
    // If remaining characters are less than 10% of the max, turn the text red. Otherwise, keep it black.
    if (remainingChars < MAX_CHARS * 0.1) {
        charCounter.style.color = 'red';
    } else {
        charCounter.style.color = 'black'; // Or whatever your default text color is
    }
});

Now, when the user gets close to the 5000-character limit (below 500), the counter will automatically turn red!

// The only line that needs to change is the one setting the textContent.

mainTextInput.addEventListener('input', () => {
    const currentLength = mainTextInput.value.length;
    const remainingChars = MAX_CHARS - currentLength;

    // MODIFIED LINE:
    charCounter.textContent = `Current: ${currentLength} / Total: ${MAX_CHARS}`;

    // The color-changing logic still works the same!
    if (remainingChars < MAX_CHARS * 0.1) {
        charCounter.style.color = 'red';
    } else {
        charCounter.style.color = 'black';
    }
});

Conclusion

Fantastic work! You have successfully added another key UI feature to your application. This character counter not only looks professional but also provides essential, real-time feedback to your users.

Key Takeaways:

• The input event listener is the perfect tool for tracking changes in a <textarea> or <input> field in real-time.
• You can get the content of a text area using the .value property.
• The .length property of a string tells you how many characters it contains.
• By combining these with textContent and .style, you can create dynamic and responsive UI elements that react instantly to user actions.

In our next lesson, we'll take a step back to look at the big picture. We'll focus on refining the overall layout and styling to give our application a more polished and cohesive user experience, preparing it for the final features.