Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

#char-count {
color: black;
}

#char-count.red {
color: red;
}

Your code so far

<!-- file: index.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>
</head>

<body>
<textarea id="text-input"></textarea>
<p id="char-count">Character Count: 0/50</p>
<script src="./script.js"></script>
</body>


</html>

/* file: styles.css */
#char-count {
      color: black;
      }

      #char-count.red {
        color: red;
        }


/* file: script.js */
   const textInput = document.getElementById('text-input');
   const charCount = document.getElementById('char-count');
   const maxChars = 50;

   textInput.addEventListener('input', () => {
     // Trim input if it exceeds maxChars
       if (textInput.value.length > maxChars) {
           textInput.value = textInput.value.slice(0, maxChars);
             }

               // Update the character count
                 charCount.textContent = `Character Count: ${textInput.value.length}/50`;

                   // Apply red color when limit is reached
                     if (textInput.value.length === maxChars) {
                         charCount.classList.add('red');
                           } else {
                               charCount.classList.remove('red');
                                 }
                                 });

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Mobile Safari/537.36

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter
https://www.freecodecamp.org/learn/full-stack-developer/lab-real-time-counter/build-a-real-time-counter

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!