Build a Real Time Counter - Build a Real Time Counter

Curriculum Help
1

Tell us what’s happening:

I have that little trouble of : All the tests pass, but when i write anything up to 50, i can enter a 51th char that isnt writen down (it makes the counter show 51 D: )

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">
    <link href="styles.css" rel="stylsheet">
    <title>Real Time Counter</title>
</head>

<body>
    <main>
        <h1>Cat on Keyboard (Too Many Input Stopper)</h1>
        <textarea id="text-input" placeholder="Click here if AFK"></textarea>
        <p id="char-count">Character Count: 0/50</p>
    </main>
<script src="script.js"></script>
</body>


</html>

/* file: styles.css */
body{
  background-color:midnightblue;
  color:white;
  font-size:1.2rem;
}

main{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
}

#text-input{
  width: 60%;
  height: 5rem;
  background-color:lightgrey;
  border: 2px dotted black;
}

p{
  font-weight:700;
  font-size: 2rem;
  font-style:italic;
  color: lightgrey;
}

p.full{
  color:red;
}

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

function charcounting(val){
  if(val.length >= 50){
    charCount.classList.add("full")
    textInput.value = val.substring(0, 50);
  }
  else{
    charCount.classList.remove("full")
  }
  charCount.textContent = `Character Count: ${val.length}/50`
}

textInput.addEventListener("input", () => charcounting(textInput.value))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:148.0) Gecko/20100101 Firefox/148.0

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

Has the val parameter changed in your code? What was changed that now has 50 characters?