Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

For this Lab, I appear to be passing all of the test cases except one where it expects the character count to be displayed in red when it hits 50. However, it appears to do just that visually when it hits 50 for the character count so I am unsure what’s causing the issue here.

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

<body>
    <textarea rows="7" cols="30" id="text-input" placeholder="Type something..."></textarea>
    <p id="char-count">Character Count: 0/50</p>

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


</html>

/* file: styles.css */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
  box-sizing: border-box;
}
textarea {
  padding: 10px;
  border-radius: 5px;
  resize: none;
}
#char-count {
  font-weight: bold;
}

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

function helperFunction(event) {
  const charEl = document.getElementById("char-count");
  const textAreaEl = document.getElementById("text-input");

  textAreaEl.setAttribute("maxlength", 50);

  if (event.target.value.length > 50) {
    const subString = event.target.value.slice(0, 50);
    event.target.value = subString;

    // This method appears to work, but doesn't pass the test-case.
    // textAreaEl.setAttribute("style", "color: red");
    charEl.style.color = "red";
    // This method doesn't work.
    //event.target.value.style = "red";
  }

  charEl.textContent = `Character Count: ${event.target.value.length}/50`;
}

textArea.addEventListener("change", (event) => {
  helperFunction(event);
});

image
image478×701 11.3 KB

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

I tested your code. I was able to type way more than 50 characters. Your code only responded when I clicked out of the text area.

Please consider using another event in your event handler.

1 Like
3

Ah, I see. I noticed that failed edge case as well. I went ahead and used a different event for the event handler which seemed to solve the issue.