Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

I think I fulfilled all the requirements, but I can’t pass tests 4, 5, and 6. Could you help me figure out what I did wrong? Here’s a github link to my code: GitHub - seohyeonlee2020/character-counter

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"></link>
</head>

<body>
    <h1>Real Time Character Counter</h1>
    <textarea maxlength=50 id="text-input"></textarea>
    <p id="char-count" >Character Count: 0/50</p>

    <script src="script.js"></script>
</body>


</html>

/* file: styles.css */


.red{
  color: red;
}

/* file: script.js */
const textInput = document.getElementById("text-input")

const charCount = document.getElementById("char-count")

const counter = () => {
const textLength = textInput.value.split("").length

if (textLength >= 50){
  textInput.textContent = textInput.value.slice(50)
}
  charCount.textContent = `Character Count: ${textLength}/50` 

if (textLength === 50){
  charCount.classList.add("red")
  }
else{
  charCount.classList.remove("red")
  }

}

textInput.addEventListener("keyup", counter)

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

Hi. You are using textInput.textContent to update the text inside the input field. However, textContent is not valid for an input element. Use value instead.
The line textInput.value.slice(50) is not trimming the input properly because you are slicing it starting from the 50th character instead of limiting it to the first 50 characters.
Additionally, it does not stop the user from entering more than 50 characters.

1 Like
3

Hi Hasan, thank you for pointing these out! I passed the tests.

1 Like