Build real time word counter in js

JavaScript
1

i was trying to build a real time word counter bassed on the requirements here:

and im stuck in step 4,5, and 6 and i don’t know why !

HTML :

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real Time Counter</title>
    <link rel='stylesheet' href='styles.css'>
</head>

<body>
    <div id='container'>
        <h1> Real-Time Word Counter</h1>
        <textarea rows=5 id='text-input'
                placeholder='Type Your words here'></textarea>
        <p id='char-count'>Character Count: 0/50</p>
    </div>
    <script src='script.js'></script>
</body>

</html>

JS :

const textArea = document.getElementById('text-input');
let p = document.getElementById('char-count');
let charCount = 0;

textArea.addEventListener('input', (event)=> {
    if(event.inputType == 'insertFromPaste'){ 
          if(textArea.value.length >= 50){
            textArea.value = textArea.value.substring(0,50);
            charCount = textArea.value.length;
            p.style.color= 'red'; 
          } else {
            charCount = textArea.value.length;
            p.style.color= 'black'; 
          }
    }
    else if (event.inputType !== 'deleteContentBackward') // inserting text or insertLineBreak
    {
        if(charCount < 50)
        {
          charCount++ ;
          p.style.color= 'black'; 
        }
        if(charCount >= 50){
          textArea.value = textArea.value.substring(0,50);
          p.style.color= 'red'; 
        }
    }
    // deleteBackward 
    else{
        if(charCount != 0)
        {
          charCount-- ;
          p.style.color= 'black'; 
        }
    }
    p.innerText= `Character Count: ${charCount}/50`; 
});

CSS:

body{
  padding: 0;
  margin: 0;
  height: 100vh;
  background-color: hsl(50 , 40% , 60%) ;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

#container{
  width: 80%;
  max-width: 500px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
#container h1 , p , #text-input{
  align-self: center;
}

#text-input{
  width: 80%;
}

i already had many tests and it gave good results but the compile doesnt belive my anwser :joy:

Screenshot 2025-08-11 131526
Screenshot 2025-08-11 131526731×216 20.1 KB

2

I tried pasting text longer than 50 characters, and it worked as expected.
However, instead of deleting the text character by character, I pressed Ctrl + A to select all and delete it at once, and it displayed Character Count: 49/50, allowed me to enter more text, and got stuck at Character Count: 50/50.

3

okay , i didnt put in mind selecting all the text at once so i will handle this one thank you , but ig the code should work fine for the step 4 right?

4

I think relying on the inputType property of the input event is over-complicated and will not work with the tests.

A simpler approach is to check whether the textarea’s value has changed in general, without trying to detect whether the change was caused by insertion, deletion, or any other specific input type.

Paste this at the end of your code, and check the output:

textArea.value = 'hello coder';
textArea.dispatchEvent(new Event('input'));
textArea.dispatchEvent(new Event('change'));
console.log('Your Output: ', p.innerText.trim());
console.log('Expected Output: ', 'Character Count: 11/50');

This is similar to how the tests work to check if your code passes or not.

5

i did it thanks for your help.
here is my final js code:

removed
6

Please don’t post solution code to the forum.

It is great that you solved the challenge, but please don’t post your full working solution.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

7

oh sorry , i didnt mean to.