Build a Real Time Counter - Build a Real Time Counter

Tell us what’s happening:

The 6th condition is not passing:

I have tried setting the attribute of html element to maxlength.
I tried disabling textarea when condition is reached.
Also the truncating method currently in the code.
None of this works and its not passing even though it works when I try it manually.

Any help would be great.
Thank You.

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>
    <link rel = "stylesheet" href = "styles.css">
</head>

<body>
    <h1>Character Counter</h1>
    <main>
        <textarea id = "text-input" rows = "8" cols = "50" placeholder = "Type Something..." maxlength = "50"></textarea>
        <p id = "char-count" >Character Count: 0/50</p>
    </main>
    <script src = "script.js"></script>
</body>


</html>
/* file: styles.css */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html {
  background: rgb(221, 233, 193)
}

h1 {
 margin-top: 10vh;
 text-align: center;
 font-family: arial;
}
textarea {
  margin: 10vh;
  background: white;
}

p {
  text-align: center;
  font-family: sans-serif;
}

.para {
  color:red;
  text-align: center;
  font-family: sans-serif;
}

/* file: script.js */
let text = document.getElementById("text-input");
let para = document.getElementById("char-count");

const updateFunc = () => {
  
  para.textContent = "Character Count: " + text.value.length + "/50";
   
  if (text.value.length >= 50) {
  para.classList.add("para");
   text.value = text.value.substring(0, 49);
  } else {
    para.classList.remove("para");
  }
}

text.addEventListener('input', () => {
  updateFunc();
});

  

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

Look carefully at your event listener. Do we call the function inside the listener or do we reference the function inside the listener?

Thank you for your input! I completely forgot about that. We reference the function and I’ve changed my code as follows:

text.addEventListener('input', updateFunc);

Still the 6 th test is not passing tho.
Thank You!!

Check this length, please.

1 Like

Thank you that worked!
I tried changing that before as well it didn’t work. I should’ve checked that once more after the previous correction.

Anyways thank you so much for your time!!